wj-elements 0.1.6 → 0.1.7

package/dist/wje-element.js

@@ -0,0 +1,453 @@
+var v = Object.defineProperty;
+var A = (h, e, t) => e in h ? v(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
+var a = (h, e, t) => (A(h, typeof e != "symbol" ? e + "" : e, t), t), P = (h, e, t) => {
+  if (!e.has(h))
+    throw TypeError("Cannot " + t);
+};
+var w = (h, e, t) => {
+  if (e.has(h))
+    throw TypeError("Cannot add the same private member more than once");
+  e instanceof WeakSet ? e.add(h) : e.set(h, t);
+};
+var p = (h, e, t) => (P(h, e, "access private method"), t);
+import { store as b, defaultStoreActions as C } from "./wje-store.js";
+class j {
+  constructor(e = {}) {
+    a(this, "findByKey", (e, t, s) => {
+      if (this._store.getState()[e] instanceof Array)
+        return this._store.getState()[e].find((n) => n[t] == s);
+      console.warn(` Attribute ${e} is not array`);
+    });
+    a(this, "findById", (e, t) => {
+      if (this._store.getState()[e] instanceof Array)
+        return this._store.getState()[e].find((i) => i.id == t);
+      console.warn(` Attribute ${e} is not array`);
+    });
+    a(this, "findAttributeValue", (e) => this._store.getState()[e]);
+    a(this, "update", (e, t) => {
+      this._store.dispatch(t(e));
+    });
+    a(this, "add", (e, t) => {
+      this._store.dispatch(t(e));
+    });
+    a(this, "loadPromise", (e, t, s = "GET", i, n = () => {
+    }) => fetch(e, {
+      method: s,
+      body: i,
+      cache: "no-cache",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      async: !0,
+      referrerPolicy: "same-origin"
+    }).then((r, o) => {
+      var y;
+      let m = (y = r.headers.get("permissions")) == null ? void 0 : y.split(",");
+      if (n(m), r.ok)
+        return r.json();
+      throw r.json();
+    }).then((r) => (this._store.dispatch(t(r)), r)));
+    a(this, "loadOnePromise", (e, t) => fetch(e, {
+      cache: "no-cache",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      referrerPolicy: "same-origin"
+    }).then((s) => (s = s.json(), t && this._store.dispatch(t(s)), s)));
+    a(this, "load", (e, t = !1) => $.ajax({
+      method: "GET",
+      url: e,
+      async: t,
+      dataType: "json"
+    }));
+    this._store = e.store, this.premenna = null;
+  }
+  _save(e, t, s, i, n) {
+    let r = fetch(e, {
+      method: n,
+      body: JSON.stringify(t),
+      cache: "no-cache",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      referrerPolicy: "same-origin"
+    }).then((o) => (o.ok, o.json()));
+    return this.dispatch(r, i, s);
+  }
+  _get(e, t, s) {
+    let i = fetch(e, {
+      method: "GET",
+      cache: "no-cache",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      referrerPolicy: "same-origin"
+    }).then(async (n) => {
+      let r;
+      try {
+        let o = await n.text();
+        return JSON.parse(o);
+      } catch {
+        return r;
+      }
+    });
+    return this.dispatch(i, s, t);
+  }
+  put(e, t, s, i = !0) {
+    return this._save(e, t, s, i, "PUT");
+  }
+  post(e, t, s, i = !0) {
+    return this._save(e, t, s, i, "POST");
+  }
+  delete(e, t, s, i = !0) {
+    return this._save(e, t, s, i, "DELETE");
+  }
+  get(e, t, s = !0) {
+    return this._get(e, t, s);
+  }
+  dispatch(e, t, s) {
+    return t ? e.then((i) => (this._store.dispatch(s(i.data)), i)).catch((i) => {
+      console.error(i);
+    }) : e;
+  }
+}
+class c {
+  constructor() {
+  }
+  static get permissions() {
+    return [
+      ...intranet.storage().getItem("permissions", "settings") || [],
+      ...intranet.storage().getItem("globalPermissions", "settings") || []
+    ];
+  }
+  static includesKey(e) {
+    return c.permissions.includes(e);
+  }
+  static getKeys() {
+    let e = [];
+    return this.hasAttribute("permission-check") && (e = this.getAttribute("permission-check").split(",")), e;
+  }
+  static shouldShow() {
+    return this.hasAttribute("show") && JSON.parse(this.getAttribute("show"));
+  }
+  static isPermissionFulfilled() {
+    return c.getKeys.bind(this)().some((e) => c.permissions.includes(e)) || c.shouldShow.bind(this)();
+  }
+}
+class u {
+  constructor() {
+  }
+  /**
+   *
+   * @param element : HTMLElement
+   * @param object : Object
+   */
+  static setAttributesToElement(e, t) {
+    Object.entries(t).forEach(([s, i]) => {
+      e.setAttribute(s, i);
+    });
+  }
+  /** @function getAttributes
+   * @description Vráti všetky atributy elementu v poli
+   * @return (array)
+   */
+  static getAttributes(e) {
+    return typeof e == "string" && (e = document.querySelector(e)), Array.from(e.attributes).filter((t) => !t.name.startsWith("@")).map((t) => [t.name.split("-").map((s, i) => i != 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s).join(""), t.value]).reduce((t, s) => (t[s[0]] = s[1], t), {});
+  }
+  static getEvents(e) {
+    return typeof e == "string" && (e = document.querySelector(e)), Array.from(e.attributes).filter((t) => t.name.startsWith("@wje")).map((t) => [t.name.substring(3).split("-").join(""), t.value]).reduce((t, s) => (t.set(s[0], s[1]), t), /* @__PURE__ */ new Map());
+  }
+  static attributesToString(e) {
+    return Object.entries(e).map(([t, s]) => `${t}="${s}"`).join(" ");
+  }
+  static hasSlot(e, t = null) {
+    let s = t ? `[slot="${t}"]` : "[slot]";
+    return e.querySelectorAll(s).length > 0;
+  }
+  static stringToBoolean(e) {
+    return !["false", "0", 0].includes(e);
+  }
+}
+var l, d, g;
+class T {
+  constructor() {
+    w(this, d);
+    this.customEventStorage = [], l = this;
+  }
+  dispatchCustomEvent(e, t, s) {
+    e.dispatchEvent(
+      new CustomEvent(t, {
+        detail: s || {
+          context: e,
+          event: l
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  findRecordByElement(e) {
+    for (var t = 0, s = this.customEventStorage.length; t < s; t++) {
+      var i = this.customEventStorage[t];
+      if (e == i.element)
+        return i;
+    }
+    return !1;
+  }
+  addListener(e, t, s, i, n) {
+    e && (Array.isArray(e) || (e = [e]), e.forEach((r) => {
+      this.writeRecord(r, t, s, i, n);
+    }));
+  }
+  writeRecord(e, t, s, i, n) {
+    let r = this.findRecordByElement(e);
+    r ? r.listeners[t] = r.listeners[t] || [] : (r = {
+      element: e,
+      listeners: {}
+    }, r.listeners[t] = [], this.customEventStorage.push(r)), i = i || p(this, d, g);
+    let o = {
+      listener: i,
+      options: n,
+      event: s
+    };
+    this.listenerExists(e, t, o) || (r.listeners[t].push(o), e.addEventListener(t, i));
+  }
+  listenerExists(e, t, s) {
+    return this.findRecordByElement(e).listeners[t].some((n) => JSON.stringify(n) === JSON.stringify(s));
+  }
+  removeListener(e, t, s, i, n) {
+    let r = this.findRecordByElement(e);
+    if (r && t in r.listeners) {
+      var o = r.listeners[t].indexOf(i);
+      ~o && r.listeners[t].splice(o, 1), r.listeners[t].length || delete r.listeners[t];
+    }
+    i = i || p(this, d, g), e.removeEventListener(t, i, n);
+  }
+  removeElement(e) {
+    this.customEventStorage = this.customEventStorage.filter((t) => {
+      if (t.element !== e)
+        return t;
+    });
+  }
+  // TODO
+  createPromiseFromEvent(e, t) {
+    return new Promise((s) => {
+      let i = () => {
+        e.removeEventListener(t, i), s();
+      };
+      e.addEventListener(t, i);
+    });
+  }
+}
+d = new WeakSet(), g = function(e) {
+  let t = this;
+  l.findRecordByElement(t).listeners[e.type].forEach((n, r) => {
+    l.dispatchCustomEvent(t, n.event, {
+      originalEvent: (e == null ? void 0 : e.type) || null,
+      context: t,
+      event: l
+    }), n.options && n.options.stopPropagation === !0 && e.stopPropagation();
+  });
+};
+let _ = new T();
+const E = document.createElement("template");
+E.innerHTML = "";
+const f = class f extends HTMLElement {
+  constructor(t) {
+    super();
+    a(this, "initWjElement", async (t = !1) => {
+      var n;
+      this.functionStack = [];
+      const s = Date.now();
+      this.functionStack.push(s), (n = this.setupAttributes) == null || n.call(this), this.isShadowRoot && !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" }), this.setUpAccessors(), this.drawingStatus = "BEGINING", this.display(t, s);
+      const i = new CSSStyleSheet();
+      i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
+    });
+    this.template = t || E, this.isAttached = !1, this.service = new j({
+      store: b
+    }), this.defineDepandencies(), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1, this._depandencies = {};
+  }
+  get permission() {
+    return this.getAttribute("permission-check");
+  }
+  get isPermissionCheck() {
+    return this.hasAttribute("permission-check");
+  }
+  set isPermissionCheck(t) {
+    return this.setAttribute("permission-check", "permission-check");
+  }
+  get isShow() {
+    return this.hasAttribute("show");
+  }
+  get isShadowRoot() {
+    return this.hasAttribute("shadow");
+  }
+  set isShadowRoot(t) {
+    return this.setAttribute("shadow", t);
+  }
+  get shadowType() {
+    return this.getAttribute("shadow") || "open";
+  }
+  get context() {
+    return this.isShadowRoot ? this.shadowRoot : this;
+  }
+  get store() {
+    return b;
+  }
+  // addAction,
+  // deleteAction,
+  // loadAction,
+  // updateAction,
+  // addManyAction
+  /**
+   * @typedef {Object} ArrayActions
+   * @property {function} addAction - Indicates whether the Courage component is present.
+   * @property {function} deleteAction - Indicates whether the Power component is present.
+   * @property {function} loadAction - Indicates whether the Wisdom component is present.
+   * @property {function} updateAction - Indicates whether the Wisdom component is present.
+   */
+  /**
+   * @typedef {Object} ObjectActions
+   * @property {function} addAction - Indicates whether the Courage component is present.
+   * @property {function} deleteAction - Indicates whether the Power component is present.
+   * @property {function} updateAction - Indicates whether the Wisdom component is present.
+   */
+  /**
+   * @return {ArrayActions, ObjectActions}
+   */
+  get defaultStoreActions() {
+    return C;
+  }
+  get removeClassAfterConnect() {
+    var t;
+    return (t = this.getAttribute("remove-class-after-connect")) == null ? void 0 : t.split(" ");
+  }
+  get depandencies() {
+    return this._depandencies;
+  }
+  set depandencies(t) {
+    this._depandencies = t;
+  }
+  static define(t, s = this, i = {}) {
+    if (!customElements.get(t)) {
+      customElements.define(t, s, i);
+      return;
+    }
+  }
+  defineDepandencies() {
+    this.depandencies && Object.entries(depandencies).forEach((t, s) => f.define(t, s));
+  }
+  beforeDraw() {
+  }
+  afterDraw() {
+  }
+  refreshUpdatePromise() {
+    this.updateComplete = new Promise((t, s) => {
+      this.finisPromise = t, this.rejectPromise = s;
+    });
+  }
+  async connectedCallback() {
+    this.finisPromise = (t) => {
+      t();
+    }, this.rejectPromise = (t) => {
+      t();
+    }, this.refreshUpdatePromise(), await this.initWjElement(!0);
+  }
+  setupAttributes() {
+    u.getEvents(this).forEach((s, i) => {
+      this.addEventListener(i, (n) => {
+        var r, o;
+        (o = (r = this.getRootNode().host)[s]) == null || o.call(r);
+      });
+    });
+  }
+  beforeDisconnect() {
+  }
+  disconnectedCallback() {
+    var t, s;
+    (t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.drawingStatus = "DISCONNECTED", this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
+  }
+  /**
+   * Lifecycle method, called whenever an observed property changes
+   */
+  attributeChangedCallback(t, s, i) {
+    if (!this.isAttached && s !== i) {
+      this.scheludedRefresh = !0;
+      return;
+    }
+    s !== i && this.refresh();
+  }
+  async refresh() {
+    var t, s;
+    this.refreshUpdatePromise(), this.drawingStatus != "AFTER" ? ((t = this.afterDisconnect) == null || t.call(this), await this.initWjElement(!0)) : ((s = this.unregister) == null || s.call(this), await this.initWjElement(!0));
+  }
+  /**
+   * To be implemented by the child class
+   */
+  draw(t, s, i) {
+    return null;
+  }
+  display(t = !1, s) {
+    this.isProcessingFlow(s) || (t && ([...this.context.childNodes].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? c.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
+  }
+  async render(t) {
+    this.drawingStatus = "DRAWING", !this.isProcessingFlow(t) && await Promise.resolve(this.draw(this.context, this.store, u.getAttributes(this))).then((s) => {
+      let i = s || "", n;
+      if (i instanceof HTMLElement || i instanceof DocumentFragment)
+        n = i;
+      else {
+        let o = document.createElement("template");
+        o.innerHTML = i, n = o.content.cloneNode(!0);
+      }
+      let r = n;
+      this.isProcessingFlow(t) || this.context.appendChild(r);
+    });
+  }
+  /**
+   * Turns a string split with "-" into camel case notation
+   */
+  sanitizeName(t) {
+    let s = t.split("-");
+    return [s.shift(), ...s.map((i) => i[0].toUpperCase() + i.slice(1))].join("");
+  }
+  /**
+   * Creates one property on this class for every
+   * HTML property defined on the element
+   */
+  setUpAccessors() {
+    this.getAttributeNames().forEach((s) => {
+      const i = this.sanitizeName(s);
+      this[i] == null && Object.defineProperty(this, i, {
+        set: (n) => this.setAttribute(s, n),
+        get: (n) => this.getAttribute(s)
+      });
+    });
+  }
+  isProcessingFlow(t) {
+    return !this.functionStack.find((s) => s == t);
+  }
+  _resolveRender(t) {
+    this.isProcessingFlow(t) || (this.params = u.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, u.getAttributes(this))).then((s) => {
+      this.drawingStatus = "BEFORE", Promise.resolve(this.render(t)).then((i) => {
+        var n;
+        this.isProcessingFlow(t) || Promise.resolve((n = this.afterDraw) == null ? void 0 : n.call(this, this.context, this.store, u.getAttributes(this))).then(
+          (r, o, m) => {
+            this.drawingStatus = "AFTER", this.finisPromise(), this.rendering = !1, this.isAttached = !0, this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect), this.scheludedRefresh && (this.refresh(), this.scheludedRefresh = !1);
+          }
+        );
+      });
+    }));
+  }
+};
+a(f, "processTemplates", (t, s) => {
+  const i = document.createElement("template");
+  return i.innerHTML = [s.innerHTML, (t == null ? void 0 : t.innerHTML) || ""].join(""), i;
+});
+let S = f, k = "true";
+export {
+  u as WjElementUtils,
+  c as WjePermissionsApi,
+  k as __esModule,
+  S as default,
+  _ as event
+};

package/dist/wje-fetchAndParseCSS.js

@@ -0,0 +1,40 @@
+let o = [];
+function i(n) {
+  const t = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
+  let r, e = [];
+  for (; (r = t.exec(n)) !== null; ) {
+    let s = r[1], a = r[2].trim(), f = l(a);
+    e.push({ name: s, keyframes: f });
+  }
+  return e;
+}
+function l(n) {
+  const t = /([\d%]+)\s*{([\s\S]+?)}/g;
+  let r, e = [];
+  for (; (r = t.exec(n)) !== null; ) {
+    let s = parseFloat(r[1]) / 100, a = c(r[2]), f = {
+      offset: s,
+      ...a
+    };
+    e.push(f);
+  }
+  return e.sort((s, a) => s.offset - a.offset), e;
+}
+function c(n) {
+  const t = {};
+  return n.split(";").forEach((r) => {
+    const [e, s] = r.split(":").map((a) => a.trim());
+    e && s && (e === "animation-timing-function" ? t.easing = s : t[e] = s);
+  }), t;
+}
+async function m(n) {
+  try {
+    return o.length > 0 || (o = i(n)), o;
+  } catch (t) {
+    console.error("Error:", t);
+  }
+}
+export {
+  o as animations,
+  m as fetchAndParseCSS
+};

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

@@ -0,0 +1,115 @@
+var f = Object.defineProperty;
+var j = (a, e, t) => e in a ? f(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var m = (a, e, t) => (j(a, typeof e != "symbol" ? e + "" : e, t), t);
+import v from "./wje-element.js";
+import { L as x } from "./localize-DVuO3S17.js";
+import E from "./wje-format-digital.js";
+import z from "./wje-button.js";
+import A from "./wje-slider.js";
+import C from "./wje-icon.js";
+const L = ':host{width:100%}.native-file-upload-item{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 .5rem;grid-template-areas:"image name actions" "image size actions" "progress progress progress";padding:.5rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}.image{grid-area:image;align-items:center;display:flex}::slotted([slot="img"]){--wje-img-border-radius: var(--wje-border-radius-medium) !important}.name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.size{grid-area:size;display:flex}.actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
+class g extends v {
+  /**
+   * Creates an instance of FileUploadItem.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Dependencies
+     * @type {Object}
+     */
+    m(this, "depandencies", {
+      "wje-format-digital": E,
+      "wje-button": z,
+      "wje-slider": A,
+      "wje-icon": C
+    });
+    m(this, "className", "FileUploadItem");
+    /**
+     * Handles the delete action.
+     */
+    m(this, "onDelete", () => {
+      this.remove();
+    });
+    this.localizer = new x(this);
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return L;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["uploaded"];
+  }
+  /**
+   * Called when an observed attribute has been added, removed, updated, or replaced.
+   *
+   * @param {string} name - The name of the attribute.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
+   */
+  attributeChangedCallback(t, w, b) {
+    if (t === "uploaded" && this.drawingStatus === "AFTER") {
+      this.uploadedEl.setAttribute("value", this.uploaded);
+      let l = +this.uploaded / +this.size * 100 || 0;
+      this.sliderEl.setAttribute("value", Math.round(l, 0));
+    }
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Method to draw the component.
+   * @param {Object} context - The context of the component.
+   * @param {Object} store - The store of the component.
+   * @param {Object} params - The parameters for the component.
+   * @returns {DocumentFragment} The fragment containing the component.
+   */
+  draw(t, w, b) {
+    let l = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-file-upload-item");
+    let h = document.createElement("slot");
+    h.setAttribute("name", "img");
+    let p = document.createElement("div");
+    p.classList.add("image");
+    let u = document.createElement("span");
+    u.classList.add("name"), u.innerText = this.name;
+    let d = document.createElement("slot");
+    d.classList.add("actions"), d.setAttribute("name", "action");
+    let r = document.createElement("wje-button");
+    r.setAttribute("fill", "link"), r.setAttribute("size", "small"), r.innerHTML = '<wje-icon name="x" size="small"></wje-icon>';
+    let o = document.createElement("span");
+    o.classList.add("size");
+    let n = document.createElement("wje-format-digital");
+    n.setAttribute("value", this.uploaded || 0), n.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
+    let c = document.createElement("wje-format-digital");
+    c.setAttribute("value", this.size || 0), c.innerHTML = `<span slot="start">&nbsp;${this.localizer.translate("wj.file.upload.from")} </span>`;
+    let s = document.createElement("wje-slider");
+    return s.classList.add("file-progress"), s.setAttribute("id", "id-" + this.lastModified), s.setAttribute("value", this.progress || 0), s.setAttribute("color", "success"), p.appendChild(h), d.appendChild(r), o.appendChild(n), o.appendChild(c), i.appendChild(p), i.appendChild(u), i.appendChild(o), i.appendChild(d), i.appendChild(s), l.appendChild(i), this.button = r, this.uploadedEl = n, this.sliderEl = s, l;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  afterDraw() {
+    this.button.addEventListener("wje-button:click", this.onDelete);
+  }
+}
+g.define("wje-file-upload-item", g);
+export {
+  g as default
+};