wj-elements 0.0.11 → 0.0.13

package/dist/wj-element.js

@@ -1,117 +1,165 @@
-var A = Object.defineProperty;
-var E = (o, e, t) => e in o ? A(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => (E(o, typeof e != "symbol" ? e + "" : e, t), t), v = (o, e, t) => {
-  if (!e.has(o))
-    throw TypeError("Cannot " + t);
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-var b = (o, e, t) => {
-  if (e.has(o))
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(o) : e.set(o, t);
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
 };
-var f = (o, e, t) => (v(o, e, "access private method"), t);
-import { store as w, defaultStoreActions as P } from "./wj-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`);
+var _dispatch, dispatch_fn;
+import { store, defaultStoreActions } from "./wj-store.js";
+class UniversalService {
+  constructor(props = {}) {
+    __publicField(this, "findByKey", (attrName, key, keyValue) => {
+      if (this._store.getState()[attrName] instanceof Array) {
+        let find = this._store.getState()[attrName].find((item) => item[key] == keyValue);
+        return find;
+      } else {
+        console.warn(` Attribute ${attrName} 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`);
+    __publicField(this, "findById", (attrName, id) => {
+      if (this._store.getState()[attrName] instanceof Array) {
+        let find = this._store.getState()[attrName].find((item) => item.id == id);
+        return find;
+      } else {
+        console.warn(` Attribute ${attrName} is not array`);
+      }
     });
-    a(this, "findAttributeValue", (e) => this._store.getState()[e]);
-    a(this, "update", (e, t) => {
-      this._store.dispatch(t(e));
+    __publicField(this, "findAttributeValue", (attrName) => {
+      return this._store.getState()[attrName];
     });
-    a(this, "add", (e, t) => {
-      this._store.dispatch(t(e));
+    __publicField(this, "update", (data, action) => {
+      this._store.dispatch(action(data));
     });
-    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, h) => {
-      var g;
-      let p = (g = r.headers.get("permissions")) == null ? void 0 : g.split(",");
-      if (n(p), 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),
+    __publicField(this, "add", (data, action) => {
+      this._store.dispatch(action(data));
+    });
+    __publicField(this, "loadPromise", (url, action, method = "GET", data, permissionCallBack = () => {
+    }) => {
+      return fetch(url, {
+        method,
+        body: data,
+        cache: "no-cache",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        async: true,
+        referrerPolicy: "same-origin"
+      }).then((response, e) => {
+        var _a;
+        let permissions = (_a = response.headers.get("permissions")) == null ? void 0 : _a.split(",");
+        permissionCallBack(permissions);
+        if (response.ok) {
+          return response.json();
+        } else {
+          throw response.json();
+        }
+      }).then((data2) => {
+        this._store.dispatch(action(data2));
+        return data2;
+      });
+    });
+    __publicField(this, "loadOnePromise", (url, action) => {
+      return fetch(url, {
+        cache: "no-cache",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        referrerPolicy: "same-origin"
+      }).then((data) => {
+        data = data.json();
+        if (action) {
+          this._store.dispatch(action(data));
+        }
+        return data;
+      });
+    });
+    __publicField(this, "load", (url, async = false) => {
+      return $.ajax({
+        method: "GET",
+        url,
+        async,
+        dataType: "json"
+      });
+    });
+    this._store = props.store;
+    this.premenna = null;
+  }
+  _save(url, data, action, dispatchMethod, method) {
+    let promise = fetch(url, {
+      method,
+      body: JSON.stringify(data),
       cache: "no-cache",
       headers: {
         "Content-Type": "application/json"
       },
       referrerPolicy: "same-origin"
-    }).then((h) => (h.ok, h.json()));
-    return this.dispatch(r, i, s);
+    }).then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        return response.json();
+      }
+    });
+    return this.dispatch(promise, dispatchMethod, action);
   }
-  _get(e, t, s) {
-    let i = fetch(e, {
+  _get(url, action, dispatchMethod) {
+    let promise = fetch(url, {
       method: "GET",
       cache: "no-cache",
       headers: {
         "Content-Type": "application/json"
       },
       referrerPolicy: "same-origin"
-    }).then(async (n) => {
-      let r;
+    }).then(async (response) => {
+      let text;
       try {
-        let h = await n.text();
-        return JSON.parse(h);
-      } catch {
-        return r;
+        let text2 = await response.text();
+        const data = JSON.parse(text2);
+        return data;
+      } catch (err) {
+        return text;
       }
     });
-    return this.dispatch(i, s, t);
+    return this.dispatch(promise, dispatchMethod, action);
   }
-  put(e, t, s, i = !0) {
-    return this._save(e, t, s, i, "PUT");
+  put(url, data, action, dispatchMethod = true) {
+    return this._save(url, data, action, dispatchMethod, "PUT");
   }
-  post(e, t, s, i = !0) {
-    return this._save(e, t, s, i, "POST");
+  post(url, data, action, dispatchMethod = true) {
+    return this._save(url, data, action, dispatchMethod, "POST");
   }
-  delete(e, t, s, i = !0) {
-    return this._save(e, t, s, i, "DELETE");
+  delete(url, data, action, dispatchMethod = true) {
+    return this._save(url, data, action, dispatchMethod, "DELETE");
   }
-  get(e, t, s = !0) {
-    return this._get(e, t, s);
+  get(url, action, dispatchMethod = true) {
+    return this._get(url, action, dispatchMethod);
   }
-  dispatch(e, t, s) {
-    return t ? e.then((i) => (this._store.dispatch(s(i.data)), i)).catch((i) => {
-      console.error(i);
-    }) : e;
+  dispatch(promise, dispatchMethod, action) {
+    if (dispatchMethod) {
+      return promise.then((data) => {
+        this._store.dispatch(action(data.data));
+        return data;
+      }).catch((error) => {
+        console.error(error);
+      });
+    }
+    return promise;
   }
 }
-class c {
+class WjPermissionsApi {
   constructor() {
   }
   static get permissions() {
@@ -120,21 +168,24 @@ class c {
       ...intranet.storage().getItem("globalPermissions", "settings") || []
     ];
   }
-  static includesKey(e) {
-    return c.permissions.includes(e);
+  static includesKey(key) {
+    return WjPermissionsApi.permissions.includes(key);
   }
   static getKeys() {
-    let e = [];
-    return this.hasAttribute("permission-check") && (e = this.getAttribute("permission-check").split(",")), e;
+    let key = [];
+    if (this.hasAttribute("permission-check")) {
+      key = this.getAttribute("permission-check").split(",");
+    }
+    return key;
   }
   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)();
+    return WjPermissionsApi.getKeys.bind(this)().some((perm) => WjPermissionsApi.permissions.includes(perm)) || WjPermissionsApi.shouldShow.bind(this)();
   }
 }
-class u {
+class WjElementUtils {
   constructor() {
   }
   /**
@@ -142,115 +193,173 @@ class u {
    * @param element : HTMLElement
    * @param object : Object
    */
-  static setAttributesToElement(e, t) {
-    Object.entries(t).forEach(([s, i]) => {
-      e.setAttribute(s, i);
+  static setAttributesToElement(element, object) {
+    Object.entries(object).forEach(([key, value]) => {
+      element.setAttribute(key, value);
     });
   }
   /** @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("@wj")).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);
+  static getAttributes(el) {
+    if (typeof el === "string")
+      el = document.querySelector(el);
+    return Array.from(el.attributes).filter((a) => !a.name.startsWith("@")).map((a) => [a.name.split("-").map((s, i) => {
+      if (i != 0) {
+        return s.charAt(0).toUpperCase() + s.slice(1);
+      } else {
+        return s;
+      }
+    }).join(""), a.value]).reduce((acc, attr) => {
+      acc[attr[0]] = attr[1];
+      return acc;
+    }, {});
+  }
+  static getEvents(el) {
+    if (typeof el === "string")
+      el = document.querySelector(el);
+    return Array.from(el.attributes).filter((a) => a.name.startsWith("@wj")).map((a) => [a.name.substring(3).split("-").join(""), a.value]).reduce((acc, attr) => {
+      acc.set(attr[0], attr[1]);
+      return acc;
+    }, /* @__PURE__ */ new Map());
+  }
+  static attributesToString(object) {
+    return Object.entries(object).map(([key, value]) => {
+      return `${key}="${value}"`;
+    }).join(" ");
+  }
+  static hasSlot(el, slotName = null) {
+    let selector = slotName ? `[slot="${slotName}"]` : "[slot]";
+    return el.querySelectorAll(selector).length > 0 ? true : false;
+  }
+  static stringToBoolean(string) {
+    return !["false", "0", 0].includes(string);
   }
 }
-var d, l, m;
-class T {
+var self;
+class WjEvent {
   constructor() {
-    b(this, l);
-    this.customEventStorage = [], d = this;
-  }
-  dispatchCustomEvent(e, t, s) {
-    e.dispatchEvent(
-      new CustomEvent(t, {
-        detail: s,
-        bubbles: !0,
-        composed: !0
+    __privateAdd(this, _dispatch);
+    this.customEventStorage = [];
+    self = this;
+  }
+  dispatchCustomEvent(element, event2, detail) {
+    element.dispatchEvent(
+      new CustomEvent(event2, {
+        detail,
+        bubbles: true,
+        composed: true
       })
     );
   }
-  findRecordByElement(e) {
-    for (var t = 0, s = this.customEventStorage.length; t < s; t++) {
-      var i = this.customEventStorage[t];
-      if (e == i.element)
-        return i;
+  findRecordByElement(element) {
+    for (var index = 0, length = this.customEventStorage.length; index < length; index++) {
+      var record = this.customEventStorage[index];
+      if (element == record.element) {
+        return record;
+      }
     }
-    return !1;
+    return false;
   }
-  addListener(e, t, s, i, n) {
-    if (!e)
+  addListener(element, originalEvent, event2, listener, options) {
+    if (!element)
       return;
-    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 || f(this, l, m);
-    let h = {
-      listener: i,
-      options: n,
-      event: s
+    let record = this.findRecordByElement(element);
+    if (record) {
+      record.listeners[originalEvent] = record.listeners[originalEvent] || [];
+    } else {
+      record = {
+        element,
+        listeners: {}
+      };
+      record.listeners[originalEvent] = [];
+      this.customEventStorage.push(record);
+    }
+    listener = listener || __privateMethod(this, _dispatch, dispatch_fn);
+    let obj = {
+      listener,
+      options,
+      event: event2
     };
-    this.listenerExists(e, t, h) || (r.listeners[t].push(h), e.addEventListener(t, i));
+    if (!this.listenerExists(element, originalEvent, obj)) {
+      record.listeners[originalEvent].push(obj);
+      element.addEventListener(originalEvent, listener);
+    }
   }
-  listenerExists(e, t, s) {
-    return this.findRecordByElement(e).listeners[t].some((n) => JSON.stringify(n) === JSON.stringify(s));
+  listenerExists(element, event2, listener) {
+    let record = this.findRecordByElement(element);
+    return record.listeners[event2].some((e) => JSON.stringify(e) === JSON.stringify(listener));
   }
-  removeListener(e, t, s, i, n) {
-    let r = this.findRecordByElement(e);
-    if (r && t in r.listeners) {
-      var h = r.listeners[t].indexOf(i);
-      ~h && r.listeners[t].splice(h, 1), r.listeners[t].length || delete r.listeners[t];
+  removeListener(element, originalEvent, event2, listener, options) {
+    let record = this.findRecordByElement(element);
+    if (record && originalEvent in record.listeners) {
+      var index = record.listeners[originalEvent].indexOf(listener);
+      if (~index) {
+        record.listeners[originalEvent].splice(index, 1);
+      }
+      if (!record.listeners[originalEvent].length) {
+        delete record.listeners[originalEvent];
+      }
     }
-    i = i || f(this, l, m), e.removeEventListener(t, i, n);
+    listener = listener || __privateMethod(this, _dispatch, dispatch_fn);
+    element.removeEventListener(originalEvent, listener, options);
   }
-  removeElement(e) {
-    this.customEventStorage = this.customEventStorage.filter((t) => {
-      if (t.element !== e)
-        return t;
+  removeElement(element) {
+    this.customEventStorage = this.customEventStorage.filter((e) => {
+      if (e.element !== element)
+        return e;
     });
   }
 }
-l = new WeakSet(), m = function(e) {
-  let t = this;
-  d.findRecordByElement(t).listeners[e.type].forEach((n, r) => {
-    d.dispatchCustomEvent(t, n.event, {
+_dispatch = new WeakSet();
+dispatch_fn = function(e) {
+  let element = this;
+  let record = self.findRecordByElement(element);
+  let listeners = record.listeners[e.type];
+  listeners.forEach((listener, i) => {
+    self.dispatchCustomEvent(element, listener.event, {
       originalEvent: (e == null ? void 0 : e.type) || null,
-      context: t,
-      event: d
-    }), n.options && n.options.stopPropagation === !0 && e.stopPropagation();
+      context: element,
+      event: self
+    });
+    if (listener.options && listener.options.stopPropagation === true)
+      e.stopPropagation();
   });
 };
-let k = new T();
-const y = document.createElement("template");
-y.innerHTML = "";
-class S extends HTMLElement {
-  constructor(t) {
+let event = new WjEvent();
+const template = document.createElement("template");
+template.innerHTML = ``;
+class WJElement extends HTMLElement {
+  constructor(componentTemplate) {
     super();
-    a(this, "initWjElement", async (t = !1) => {
-      var n;
+    __publicField(this, "initWjElement", async (force = false) => {
+      var _a;
       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];
+      const processId = Date.now();
+      this.functionStack.push(processId);
+      (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
+      if (this.isShadowRoot) {
+        !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" });
+      }
+      this.setUpAccessors();
+      this.drawingStatus = "BEGINING";
+      this.display(force, processId);
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(this.constructor.cssStyleSheet);
+      this.context.adoptedStyleSheets = [sheet];
+    });
+    this.template = componentTemplate || template;
+    this._attributes = {};
+    this.isAttached = false;
+    this.service = new UniversalService({
+      store
     });
-    this.template = t || y, this._attributes = {}, this.isAttached = !1, this.service = new j({
-      store: w
-    }), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1;
+    this.rendering = false;
+    this.runtimeTimeout = null;
+    this.count = 0;
+    this.functionStack = [];
+    this.scheludedRefresh = false;
   }
   get permission() {
     return this.getAttribute("permission-check");
@@ -258,7 +367,7 @@ class S extends HTMLElement {
   get isPermissionCheck() {
     return this.hasAttribute("permission-check");
   }
-  set isPermissionCheck(t) {
+  set isPermissionCheck(shadow) {
     return this.setAttribute("permission-check", "permission-check");
   }
   get isShow() {
@@ -267,17 +376,21 @@ class S extends HTMLElement {
   get isShadowRoot() {
     return this.hasAttribute("shadow");
   }
-  set isShadowRoot(t) {
-    return this.setAttribute("shadow", t);
+  set isShadowRoot(shadow) {
+    return this.setAttribute("shadow", shadow);
   }
   get shadowType() {
     return this.getAttribute("shadow") || "open";
   }
   get context() {
-    return this.isShadowRoot ? this.shadowRoot : this;
+    if (this.isShadowRoot) {
+      return this.shadowRoot;
+    } else {
+      return this;
+    }
   }
   get store() {
-    return w;
+    return store;
   }
   //		addAction,
   //     deleteAction,
@@ -301,128 +414,189 @@ class S extends HTMLElement {
    * @return {ArrayActions, ObjectActions}
    */
   get defaultStoreActions() {
-    return P;
+    return defaultStoreActions;
   }
   get removeClassAfterConnect() {
-    var t;
-    return (t = this.getAttribute("remove-class-after-connect")) == null ? void 0 : t.split(" ");
+    var _a;
+    return (_a = this.getAttribute("remove-class-after-connect")) == null ? void 0 : _a.split(" ");
   }
   beforeDraw() {
   }
   afterDraw() {
   }
-  makeRuntimeTimeout(t = () => {
+  makeRuntimeTimeout(callback = () => {
   }) {
     return setTimeout(() => {
-      t();
+      callback();
     }, 0);
   }
   refreshUpdatePromise() {
-    this.updateComplete = new Promise((t, s) => {
-      this.finisPromise = t, this.rejectPromise = s;
+    this.updateComplete = new Promise((resolve, reject) => {
+      this.finisPromise = resolve;
+      this.rejectPromise = reject;
     });
   }
   async connectedCallback() {
-    this.finisPromise = (t) => {
-      t();
-    }, this.rejectPromise = (t) => {
-      t();
-    }, this.refreshUpdatePromise(), await this.initWjElement(!0);
+    this.finisPromise = (resolve) => {
+      resolve();
+    };
+    this.rejectPromise = (reject) => {
+      reject();
+    };
+    this.refreshUpdatePromise();
+    await this.initWjElement(true);
   }
   setupAttributes() {
-    u.getEvents(this).forEach((s, i) => {
-      this.addEventListener(i, (n) => {
-        var r, h;
-        (h = (r = this.getRootNode().host)[s]) == null || h.call(r);
+    let allEvents = WjElementUtils.getEvents(this);
+    allEvents.forEach((customEvent, domEvent) => {
+      this.addEventListener(domEvent, (e) => {
+        var _a, _b;
+        (_b = (_a = this.getRootNode().host)[customEvent]) == null ? void 0 : _b.call(_a);
       });
     });
   }
   beforeDisconnect() {
   }
   disconnectedCallback() {
-    var t, s;
-    (t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
+    var _a, _b;
+    (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
+    if (this.isAttached)
+      this.context.innerHTML = "";
+    this.isAttached = false;
+    (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
   }
   /**
       * Lifecycle method, called whenever an observed property changes
       */
-  attributeChangedCallback(t, s, i) {
-    if (!this.isAttached && s !== i) {
-      this.scheludedRefresh = !0;
+  attributeChangedCallback(name, old, newName) {
+    if (!this.isAttached && old !== newName) {
+      this.scheludedRefresh = true;
       return;
     }
-    s !== i && this.refresh();
+    if (old !== newName) {
+      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));
+    var _a, _b;
+    this.refreshUpdatePromise();
+    if (this.drawingStatus != "AFTER") {
+      (_a = this.afterDisconnect) == null ? void 0 : _a.call(this);
+      await this.initWjElement(true);
+    } else {
+      (_b = this.unregister) == null ? void 0 : _b.call(this);
+      await this.initWjElement(true);
+    }
   }
   /**
       * To be implemented by the child class
       */
-  draw(t, s, i) {
+  draw(context, store2, params) {
     return null;
   }
-  display(t = !1, s) {
-    this.isProcessingFlow(s) || (t && this.isShadowRoot && ([...this.context.children].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.isAttached, 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));
+  display(force = false, processId) {
+    if (this.isProcessingFlow(processId))
+      return;
+    if (force && this.isShadowRoot) {
+      [...this.context.children].forEach(this.context.removeChild.bind(this.context));
+      this.isAttached = false;
+    }
+    if (this.isAttached)
+      ;
+    this.context.append(this.template.content.cloneNode(true));
+    if (this.isPermissionCheck || this.isShow) {
+      if (WjPermissionsApi.isPermissionFulfilled.bind(this)(this.permission)) {
+        this._resolveRender(processId);
+      } else {
+        this.remove();
+      }
+    } else {
+      this._resolveRender(processId);
+    }
   }
-  render(t) {
-    if (this.drawingStatus = "DRAWING", this.isProcessingFlow(t))
+  render(processId) {
+    this.drawingStatus = "DRAWING";
+    if (this.isProcessingFlow(processId))
       return;
-    let s = this.draw(this.context, this.store, u.getAttributes(this)) || "", i;
-    if (s instanceof HTMLElement || s instanceof DocumentFragment)
-      i = s;
-    else {
-      let r = document.createElement("template");
-      r.innerHTML = s, i = r.content.cloneNode(!0);
+    let rend = this.draw(this.context, this.store, WjElementUtils.getAttributes(this)) || "";
+    let element;
+    if (rend instanceof HTMLElement || rend instanceof DocumentFragment) {
+      element = rend;
+    } else {
+      let template2 = document.createElement("template");
+      template2.innerHTML = rend;
+      element = template2.content.cloneNode(true);
     }
-    let n = i;
-    this.isProcessingFlow(t) || this.context.appendChild(n);
+    let rendered = element;
+    if (this.isProcessingFlow(processId))
+      return;
+    this.context.appendChild(rendered);
   }
   /**
       * 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("");
+  sanitizeName(name) {
+    let parts = name.split("-");
+    return [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.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)
-      });
+    let attrs = this.getAttributeNames();
+    attrs.forEach((name) => {
+      const sanitizedName = this.sanitizeName(name);
+      if (this[sanitizedName] == void 0) {
+        Object.defineProperty(this, sanitizedName, {
+          set: (value) => this.setAttribute(name, value),
+          get: (_) => {
+            return this.getAttribute(name);
+          }
+        });
+      }
     });
   }
-  isProcessingFlow(t) {
-    return !this.functionStack.find((s) => s == t);
+  isProcessingFlow(processId) {
+    return !this.functionStack.find((d) => d == processId);
   }
-  _resolveRender(t) {
-    this.isProcessingFlow(t) || (this.params = u.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, u.getAttributes(this))).then((s) => {
-      var i;
-      this.drawingStatus = "BEFORE", this.render(t), !this.isProcessingFlow(t) && Promise.resolve((i = this.afterDraw) == null ? void 0 : i.call(this, this.context, this.store, u.getAttributes(this))).then(
-        (n, r, h) => {
-          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);
+  _resolveRender(processId) {
+    if (this.isProcessingFlow(processId))
+      return;
+    this.params = WjElementUtils.getAttributes(this);
+    Promise.resolve(this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this))).then((res) => {
+      var _a;
+      this.drawingStatus = "BEFORE";
+      this.render(processId);
+      if (this.isProcessingFlow(processId))
+        return;
+      Promise.resolve((_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this))).then(
+        (a, b, c) => {
+          this.drawingStatus = "AFTER";
+          this.finisPromise();
+          this.rendering = false;
+          this.isAttached = true;
+          this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect);
+          if (this.scheludedRefresh) {
+            this.refresh();
+            this.scheludedRefresh = false;
+          }
         }
       );
-    }));
+    });
   }
 }
-a(S, "processTemplates", (t, s) => {
-  const i = document.createElement("template");
-  return i.innerHTML = [s.innerHTML, (t == null ? void 0 : t.innerHTML) || ""].join(""), i;
+__publicField(WJElement, "processTemplates", (pTemplate, template2) => {
+  const newTemplate = document.createElement("template");
+  newTemplate.innerHTML = [template2.innerHTML, (pTemplate == null ? void 0 : pTemplate.innerHTML) || ""].join("");
+  return newTemplate;
 });
-let _ = "true";
-customElements.get("wj-element") || customElements.define("wj-element", S);
+let __esModule = "true";
+customElements.get("wj-element") || customElements.define("wj-element", WJElement);
 export {
-  u as WjElementUtils,
-  c as WjPermissionsApi,
-  _ as __esModule,
-  S as default,
-  k as event
+  WjElementUtils,
+  WjPermissionsApi,
+  __esModule,
+  WJElement as default,
+  event
 };