wj-elements 0.1.128 → 0.1.130

package/dist/wje-element.js

@@ -13,18 +13,18 @@ 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;
+        return this._store.getState()[attrName].find((item) => item[key] === keyValue);
       } else {
         console.warn(` Attribute ${attrName} is not array`);
+        return null;
       }
     });
     __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;
+        return this._store.getState()[attrName].find((item) => item.id === id);
       } else {
         console.warn(` Attribute ${attrName} is not array`);
+        return null;
       }
     });
     __publicField(this, "findAttributeValue", (attrName) => {
@@ -36,17 +36,15 @@ class UniversalService {
     __publicField(this, "add", (data, action) => {
       this._store.dispatch(action(data));
     });
-    __publicField(this, "loadPromise", (url, action, method = "GET", data, permissionCallBack = () => {
+    __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(",");
@@ -56,46 +54,33 @@ class UniversalService {
         } else {
           throw response.json();
         }
-      }).then((data2) => {
-        this._store.dispatch(action(data2));
-        return data2;
+      }).then((responseData) => {
+        this._store.dispatch(action(responseData));
+        return responseData;
       });
     });
     __publicField(this, "loadOnePromise", (url, action) => {
       return fetch(url, {
-        // cache: 'no-cache',
         headers: {
           "Content-Type": "application/json"
         }
-        // referrerPolicy: 'same-origin',
-      }).then((data) => {
-        data = data.json();
+      }).then((response) => {
+        const responseData = response.json();
         if (action) {
-          this._store.dispatch(action(data));
+          this._store.dispatch(action(responseData));
         }
-        return data;
-      });
-    });
-    __publicField(this, "load", (url, async = false) => {
-      return $.ajax({
-        method: "GET",
-        url,
-        async,
-        dataType: "json"
+        return responseData;
       });
     });
     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((response) => {
       if (response.ok) {
         return response.json();
@@ -108,20 +93,18 @@ class UniversalService {
   _get(url, action, dispatchMethod, signal) {
     let promise = fetch(url, {
       method: "GET",
-      // cache: 'no-cache',
       headers: {
         "Content-Type": "application/json"
       },
       ...signal ? { signal } : {}
-      // referrerPolicy: 'same-origin',
     }).then(async (response) => {
-      let text;
+      let responseText;
       try {
-        let text2 = await response.text();
-        const data = JSON.parse(text2);
-        return data;
+        responseText = await response.text();
+        return JSON.parse(responseText);
       } catch (err) {
-        return text;
+        console.error(err);
+        return responseText;
       }
     });
     return this.dispatch(promise, dispatchMethod, action);
@@ -135,7 +118,7 @@ class UniversalService {
   delete(url, data, action, dispatchMethod = true) {
     return this._save(url, data, action, dispatchMethod, "DELETE");
   }
-  get(url, action, dispatchMethod = true, signal) {
+  get(url, action, dispatchMethod = true) {
     return this._get(url, action, dispatchMethod);
   }
   dispatch(promise, dispatchMethod, action) {
@@ -150,37 +133,34 @@ class UniversalService {
     return promise;
   }
 }
-class WjePermissionsApi {
-  constructor() {
-    this._permissionKey = "permissions";
-  }
+const _WjePermissionsApi = class _WjePermissionsApi {
   /**
    * Sets the permission key.
    * @param value
    */
   static set permissionKey(value) {
-    WjePermissionsApi._permissionKey = value || "permissions";
+    _WjePermissionsApi._permissionKey = value || "permissions";
   }
   /**
    * Returns the permission key.
    * @returns {*|string}
    */
   static get permissionKey() {
-    return WjePermissionsApi._permissionKey;
+    return _WjePermissionsApi._permissionKey;
   }
   /**
    * Sets the permissions.
    * @param value
    */
   static set permissions(value) {
-    window.localStorage.setItem(WjePermissionsApi.permissionKey, value);
+    window.localStorage.setItem(_WjePermissionsApi.permissionKey, JSON.stringify(value));
   }
   /**
    * Returns the permissions.
    * @returns {string[]}
    */
   static get permissions() {
-    return window.localStorage.getItem(WjePermissionsApi.permissionKey) || [];
+    return JSON.parse(window.localStorage.getItem(_WjePermissionsApi.permissionKey)) || [];
   }
   /**
    * Checks if the permission is included.
@@ -188,41 +168,23 @@ class WjePermissionsApi {
    * @returns {boolean}
    */
   static includesKey(key) {
-    return WjePermissionsApi.permissions.includes(key);
-  }
-  /**
-   * Returns the keys for the permission check.
-   * @returns {string[]}
-   */
-  static getKeys() {
-    let key = [];
-    if (this.hasAttribute("permission-check")) {
-      key = this.getAttribute("permission-check").split(",");
-    }
-    return key;
-  }
-  /**
-   * Checks if the component should be shown.
-   * @returns {boolean}
-   */
-  static shouldShow() {
-    return this.hasAttribute("show") && JSON.parse(this.getAttribute("show"));
+    return _WjePermissionsApi.permissions.includes(key);
   }
   /**
    * Checks if the permission is fulfilled.
    * @returns {boolean}
    */
-  static isPermissionFulfilled() {
-    return WjePermissionsApi.getKeys.bind(this)().some((perm) => WjePermissionsApi.permissions.includes(perm)) || WjePermissionsApi.shouldShow.bind(this)();
+  static isPermissionFulfilled(permissions) {
+    return permissions.some((perm) => _WjePermissionsApi.permissions.includes(perm));
   }
-}
+};
+__publicField(_WjePermissionsApi, "_permissionKey", "permissions");
+let WjePermissionsApi = _WjePermissionsApi;
 class WjElementUtils {
-  constructor() {
-  }
   /**
-   * This function creates an element
-   * @param element : HTMLElement
-   * @param object : Object
+   * This function creates an element.
+   * @param element : HTMLElement - The element value.
+   * @param object : Object - The object value.
    */
   static setAttributesToElement(element, object) {
     Object.entries(object).forEach(([key, value]) => {
@@ -230,41 +192,42 @@ class WjElementUtils {
     });
   }
   /**
-   * This function gets the attributes from an element
-   * @param el (string | HTMLElement)
-   * @return (array)
+   * This function gets the attributes from an element.
+   * @param {string|HTMLElement} el The element or selector to retrieve attributes from.
+   * @returns {object} - An object containing the element's attributes as key-value pairs.
    */
   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) => {
+    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;
     }, {});
   }
   /**
-   * This function gets the events from an element
-   * @param el
-   * @returns {Map<any, any>}
+   * This function gets the events from an element.
+   * @param {string|HTMLElement} el The element or selector to retrieve events from.
+   * @returns {Map<any, any>} - The map value.
    */
   static getEvents(el) {
-    if (typeof el === "string")
-      el = document.querySelector(el);
+    if (typeof el === "string") el = document.querySelector(el);
     return Array.from(el.attributes).filter((a) => a.name.startsWith("@wje")).map((a) => [a.name.substring(3).split("-").join(""), a.value]).reduce((acc, attr) => {
       acc.set(attr[0], attr[1]);
       return acc;
     }, /* @__PURE__ */ new Map());
   }
   /**
-   * This function converts an object to a string
-   * @param object
-   * @returns {string}
+   * This function converts an object to a string.
+   * @param {object} object The object to convert.
+   * @returns {string} - The string value.
    */
   static attributesToString(object) {
     return Object.entries(object).map(([key, value]) => {
@@ -272,20 +235,20 @@ class WjElementUtils {
     }).join(" ");
   }
   /**
-   * This function checks if the slot exists
-   * @param el
-   * @param slotName
-   * @returns {boolean}
+   * This function checks if the slot exists.
+   * @param {string|HTMLElement} el The element or selector to check for slots.
+   * @param slotName The slot name to check for.
+   * @returns {boolean} - The boolean value.
    */
   static hasSlot(el, slotName = null) {
     let selector = slotName ? `[slot="${slotName}"]` : "[slot]";
     return el.querySelectorAll(selector).length > 0 ? true : false;
   }
   /**
-   * This function checks if the slot has content
-   * @param el
-   * @param slotName
-   * @returns {boolean}
+   * This function checks if the slot has content.
+   * @param {string|HTMLElement} el The element or selector to check for slot content
+   * @param slotName The slot name to check for.
+   * @returns {boolean} - The boolean value.
    */
   static hasSlotContent(el, slotName = null) {
     let slotElement = el.querySelector(`slot`);
@@ -299,12 +262,13 @@ class WjElementUtils {
     return false;
   }
   /**
-   * This function converts a string to a boolean
-   * @param string
-   * @returns {boolean}
+   * This function converts a string to a boolean.
+   * @param {string | object} value The value to convert to a boolean. If the value is a boolean, it will be returned as is.
+   * @returns {boolean} - The boolean value.
    */
-  static stringToBoolean(string) {
-    return !["false", "0", 0].includes(string);
+  static stringToBoolean(value) {
+    if (typeof value === "boolean") return value;
+    return !["false", "0", 0].includes(value);
   }
 }
 var self;
@@ -314,6 +278,12 @@ class Event {
     this.customEventStorage = [];
     self = this;
   }
+  /**
+   * Dispatch custom event to the element with the specified event name and detail.
+   * @param element
+   * @param event
+   * @param detail
+   */
   dispatchCustomEvent(element, event2, detail) {
     element.dispatchEvent(
       new CustomEvent(event2, {
@@ -322,28 +292,48 @@ class Event {
           event: self
         },
         bubbles: true,
-        composed: true
+        composed: true,
+        cancelable: true
       })
     );
   }
+  /**
+   * Find record by element in the storage.
+   * @param element
+   * @returns {*}
+   */
   findRecordByElement(element) {
-    for (var index = 0, length = this.customEventStorage.length; index < length; index++) {
-      var record = this.customEventStorage[index];
-      if (element == record.element) {
+    for (let index = 0, length = this.customEventStorage.length; index < length; index++) {
+      let record = this.customEventStorage[index];
+      if (element === record.element) {
         return record;
       }
     }
     return false;
   }
+  /**
+   * Add listener to the element. If the element is an array, the listener will be added to all elements in the array.
+   * @param element
+   * @param originalEvent
+   * @param event
+   * @param listener
+   * @param options
+   */
   addListener(element, originalEvent, event2, listener, options) {
-    if (!element)
-      return;
-    if (!Array.isArray(element))
-      element = [element];
+    if (!element) return;
+    if (!Array.isArray(element)) element = [element];
     element.forEach((el) => {
       this.writeRecord(el, originalEvent, event2, listener, options);
     });
   }
+  /**
+   * Write record to the storage.
+   * @param element
+   * @param originalEvent
+   * @param event
+   * @param listener
+   * @param options
+   */
   writeRecord(element, originalEvent, event2, listener, options) {
     let record = this.findRecordByElement(element);
     if (record) {
@@ -369,23 +359,37 @@ class Event {
   }
   /**
    * Performs a deep equality check between two objects.
-   *
-   * @param {any} x - The first object to compare.
-   * @param {any} y - The second object to compare.
-   * @returns {boolean} - Returns `true` if the objects are deeply equal, `false` otherwise.
+   * @param x The first object to compare.
+   * @param y The second object to compare.
+   * @returns - Returns `true` if the objects are deeply equal, `false` otherwise.
    */
   deepEqual(x, y) {
     return x && y && typeof x === "object" && typeof x === typeof y ? Object.keys(x).length === Object.keys(y).length && Object.keys(x).every((key) => this.deepEqual(x[key], y[key])) : x === y;
   }
+  /**
+   * Check if the listener already exists on the element.
+   * @param element
+   * @param event
+   * @param listener
+   * @returns
+   */
   listenerExists(element, event2, listener) {
     let record = this.findRecordByElement(element);
     return record.listeners[event2].some((e) => this.deepEqual(e, listener));
   }
+  /**
+   * Remove listener from the element and delete the listener from the custom event storage.
+   * @param element
+   * @param originalEvent
+   * @param event
+   * @param listener
+   * @param options
+   */
   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) {
+      let index = record.listeners[originalEvent].indexOf(listener);
+      if (index !== -1) {
         record.listeners[originalEvent].splice(index, 1);
       }
       if (!record.listeners[originalEvent].length) {
@@ -395,10 +399,13 @@ class Event {
     listener = listener || __privateMethod(this, _Event_instances, dispatch_fn);
     element.removeEventListener(originalEvent, listener, options);
   }
+  /**
+   * Remove all event listeners from the specified element and delete the element from the custom event storage.
+   * @param {HTMLElement} element The element from which all listeners will be removed.
+   */
   removeElement(element) {
     this.customEventStorage = this.customEventStorage.filter((e) => {
-      if (e.element !== element)
-        return e;
+      return e.element !== element;
     });
   }
   // TODO
@@ -413,46 +420,54 @@ class Event {
   }
 }
 _Event_instances = new WeakSet();
+/**
+ * Dispatch event to the element and trigger the listener.
+ * @param e
+ */
 dispatch_fn = function(e) {
   let element = this;
   let record = self.findRecordByElement(element);
   let listeners = record.listeners[e.type];
-  listeners.forEach((listener, i) => {
+  listeners.forEach((listener) => {
     self.dispatchCustomEvent(element, listener.event, {
       originalEvent: (e == null ? void 0 : e.type) || null,
       context: element,
       event: self
     });
-    if (listener.options && listener.options.stopPropagation === true)
-      e.stopPropagation();
+    if (listener.options && listener.options.stopPropagation === true) e.stopPropagation();
   });
 };
 let event = new Event();
 const template = document.createElement("template");
 template.innerHTML = ``;
 const _WJElement = class _WJElement extends HTMLElement {
-  constructor(componentTemplate) {
+  /**
+   * Initializes a new instance of the WJElement class.
+   */
+  constructor() {
     super();
-    __publicField(this, "initWjElement", async (force = false) => {
+    /**
+     * Initializes the component, setting up attributes and rendering.
+     * @param [force] Whether to force initialization.
+     * @returns A promise that resolves when initialization is complete.
+     */
+    __publicField(this, "initWjElement", (force = false) => {
       return new Promise(async (resolve, reject) => {
         var _a;
         this.drawingStatus = this.drawingStatuses.BEGINING;
         (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
         if (this.isShadowRoot) {
-          !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" });
+          if (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || "open" });
         }
         this.setUpAccessors();
         this.drawingStatus = this.drawingStatuses.START;
         await this.display(force);
-        if (typeof this.constructor.cssStyleSheet === "string" && this.constructor.cssStyleSheet) {
-          const sheet = new CSSStyleSheet();
-          sheet.replaceSync(this.constructor.cssStyleSheet);
-          this.context.adoptedStyleSheets = [sheet];
-        }
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(this.constructor.cssStyleSheet);
+        this.context.adoptedStyleSheets = [sheet];
         resolve();
       });
     });
-    this.template = componentTemplate || template;
     this.isAttached = false;
     this.service = new UniversalService({
       store
@@ -461,6 +476,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.rendering = false;
     this._dependencies = {};
     this.drawingStatuses = {
+      CREATED: 0,
       ATTACHED: 1,
       BEGINING: 2,
       START: 3,
@@ -468,28 +484,74 @@ const _WJElement = class _WJElement extends HTMLElement {
       DONE: 5,
       DISCONNECTED: 6
     };
+    this.drawingStatus = this.drawingStatuses.CREATED;
+  }
+  /**
+   * Sets the value of the 'permission' attribute.
+   * @param {string[]} value The value to set for the 'permission' attribute.
+   */
+  set permission(value) {
+    this.setAttribute("permission", value.join(","));
   }
+  /**
+   * Gets the value of the 'permission-check' attribute.
+   * @returns {string[]} The value of the 'permission' attribute.
+   */
   get permission() {
-    return this.getAttribute("permission-check");
+    var _a;
+    return ((_a = this.getAttribute("permission")) == null ? void 0 : _a.split(",")) || [];
+  }
+  /**
+   * Sets the 'permission-check' attribute.
+   * @param {boolean} value The value to set for the 'permission-check' attribute.
+   */
+  set isPermissionCheck(value) {
+    if (value) this.setAttribute("permission-check", "");
+    else this.removeAttribute("permission-check");
   }
+  /**
+   * Checks if the 'permission-check' attribute is present.
+   * @returns {boolean} True if the 'permission-check' attribute is present.
+   */
   get isPermissionCheck() {
     return this.hasAttribute("permission-check");
   }
-  set isPermissionCheck(shadow) {
-    return this.setAttribute("permission-check", "permission-check");
+  set noShow(value) {
+    if (value) this.setAttribute("no-show", "");
+    else this.removeAttribute("no-show");
   }
-  get isShow() {
-    return this.hasAttribute("show");
+  /**
+   * Checks if the 'show' attribute is present.
+   * @returns {boolean} True if the 'show' attribute is present.
+   */
+  get noShow() {
+    return this.hasAttribute("no-show");
+  }
+  /**
+   * Sets the 'shadow' attribute.
+   * @param value The value to set for the 'shadow' attribute.
+   */
+  set isShadowRoot(value) {
+    return this.setAttribute("shadow", value);
   }
+  /**
+   * Checks if the 'shadow' attribute is present.
+   * @returns {boolean} True if the 'shadow' attribute is present.
+   */
   get isShadowRoot() {
     return this.hasAttribute("shadow");
   }
-  set isShadowRoot(shadow) {
-    return this.setAttribute("shadow", shadow);
-  }
+  /**
+   * Gets the value of the 'shadow' attribute or 'open' if not set.
+   * @returns {string} The value of the 'shadow' attribute or 'open'.
+   */
   get shadowType() {
     return this.getAttribute("shadow") || "open";
   }
+  /**
+   * Gets the rendering context, either the shadow root or the component itself.
+   * @returns The rendering context.
+   */
   get context() {
     if (this.isShadowRoot) {
       return this.shadowRoot;
@@ -497,65 +559,125 @@ const _WJElement = class _WJElement extends HTMLElement {
       return this;
     }
   }
+  /**
+   * Gets the store instance.
+   * @returns {object} The store instance.
+   */
   get store() {
     return store;
   }
-  // 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} ArrayActions
+   * @property {Function} addAction - Adds an item to the array.
+   * @property {Function} deleteAction - Deletes an item from the array.
+   * @property {Function} loadAction - Loads an array.
+   * @property {Function} updateAction - Updates an item in the array.
+   * @property {Function} addManyAction - Adds many items to the array.
    */
   /**
-   * @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.
+   * @typedef {object} ObjectActions
+   * @property {Function} addAction - Replace old object with new object
+   * @property {Function} deleteAction - Delete item based on key
+   * @property {Function} updateAction - Update item based on key
    */
   /**
-   * @typedef {Object} StoreActions
+   * Gets the default store actions.
+   * @returns The default store actions for arrays and objects.
    */
   get defaultStoreActions() {
     return defaultStoreActions;
   }
+  /**
+   * Gets the classes to be removed after the component is connected.
+   * @returns An array of class names to remove.
+   */
   get removeClassAfterConnect() {
     var _a;
     return (_a = this.getAttribute("remove-class-after-connect")) == null ? void 0 : _a.split(" ");
   }
-  get dependencies() {
-    return this._dependencies;
-  }
+  /**
+   * Sets the component dependencies.
+   * @param value The dependencies to set.
+   */
   set dependencies(value) {
     this._dependencies = value;
   }
+  /**
+   * Gets the component dependencies.
+   * @returns The component dependencies.
+   */
+  get dependencies() {
+    return this._dependencies;
+  }
+  /**
+   * Defines a custom element if not already defined.
+   * @param name The name of the custom element.
+   * @param [elementConstructor] The constructor for the custom element.
+   * @param [options] Additional options for defining the element.
+   */
   static define(name, elementConstructor = this, options = {}) {
     const definedElement = customElements.get(name);
     if (!definedElement) {
       customElements.define(name, elementConstructor, options);
-      return;
     }
   }
+  /**
+   * Defines component dependencies by registering custom elements.
+   */
   defineDependencies() {
     if (this.dependencies)
       Object.entries(this.dependencies).forEach((name, component) => _WJElement.define(name, component));
   }
-  beforeDraw() {
+  /**
+   * Hook for extending behavior before drawing the component.
+   * @param context The rendering context, usually the element's shadow root or main DOM element.
+   * @param appStoreObj The global application store for managing state.
+   * @param params Additional parameters or attributes for rendering the component.
+   */
+  beforeDraw(context, appStoreObj, params) {
+  }
+  /**
+   * Renders the component within the provided context.
+   * @param context The rendering context, usually the element's shadow root or main DOM element.
+   * @param appStoreObj
+   * @param params Additional parameters or attributes for rendering the component.
+   * @returns This implementation does not render anything and returns `null`.
+   * @description
+   * The `draw` method is responsible for rendering the component's content.
+   * Override this method in subclasses to define custom rendering logic.
+   * @example
+   * class MyComponent extends WJElement {
+   *   draw(context, appStoreObj, params) {
+   *     const div = document.createElement('div');
+   *     div.textContent = 'Hello, world!';
+   *     context.appendChild(div);
+   *   }
+   * }
+   */
+  draw(context, appStoreObj, params) {
+    return null;
   }
-  afterDraw() {
+  /**
+   * Hook for extending behavior after drawing the component.
+   * @param context The rendering context, usually the element's shadow root or main DOM element.
+   * @param appStoreObj The global application store for managing state.
+   * @param params Additional parameters or attributes for rendering the component.
+   */
+  afterDraw(context, appStoreObj, params) {
   }
+  /**
+   * Refreshes the update promise for rendering lifecycle management.
+   */
   refreshUpdatePromise() {
     this.updateComplete = new Promise((resolve, reject) => {
       this.finisPromise = resolve;
       this.rejectPromise = reject;
     });
   }
-  async connectedCallback() {
+  /**
+   * Lifecycle method invoked when the component is connected to the DOM.
+   */
+  connectedCallback() {
     this.drawingStatus = this.drawingStatuses.ATTACHED;
     this.finisPromise = (resolve) => {
       resolve();
@@ -566,6 +688,12 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.refreshUpdatePromise();
     this.renderPromise = this.initWjElement(true);
   }
+  /**
+   * Sets up attributes and event listeners for the component.
+   * This method retrieves all custom events defined for the component
+   * and adds event listeners for each of them. When an event is triggered,
+   * it calls the corresponding method on the host element.
+   */
   setupAttributes() {
     let allEvents = WjElementUtils.getEvents(this);
     allEvents.forEach((customEvent, domEvent) => {
@@ -576,25 +704,28 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
   }
   /**
-   * This method is called before the element is disconnected from the DOM.
+   * Hook for extending behavior before disconnecting the component.
    */
   beforeDisconnect() {
   }
   /**
-   * This method is called after the element is disconnected from the DOM.
+   * Hook for extending behavior after disconnecting the component.
    */
   afterDisconnect() {
   }
   /**
-   * This method is called before the element is redrawn.
+   * Hook for extending behavior before redrawing the component.
    */
   beforeRedraw() {
   }
   /**
-   * Cleans up the component.
+   * Cleans up resources and event listeners for the component.
    */
   componentCleanup() {
   }
+  /**
+   * Lifecycle method invoked when the component is disconnected from the DOM.
+   */
   disconnectedCallback() {
     var _a, _b;
     (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
@@ -604,26 +735,30 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.drawingStatus = this.drawingStatuses.DISCONNECTED;
     this.componentCleanup();
   }
-  // internal method
   /**
-   * Enqueues an update for the element.
-   * 
-   * @returns {Promise} A promise that resolves when the update is complete.
+   * Enqueues an update to the component.
+   * @returns A promise that resolves when the update is complete.
    */
   async enqueueUpdate() {
     try {
-      await this.renderPromise;
+      if (this.renderPromise && this.renderPromise instanceof Promise) {
+        await this.renderPromise;
+      }
     } catch (e) {
+      console.error("An error occurred:", e);
       Promise.reject(e);
     }
     const result = this.refresh();
-    if (result != null) {
+    if (result !== null) {
       await result;
     }
     this.renderPromise = null;
   }
   /**
-   * Lifecycle method, called whenever an observed property changes
+   * Lifecycle method invoked when an observed attribute changes.
+   * @param name The name of the attribute that changed.
+   * @param old The old value of the attribute.
+   * @param newName The new value of the attribute.
    */
   attributeChangedCallback(name, old, newName) {
     if (old !== newName) {
@@ -631,12 +766,18 @@ const _WJElement = class _WJElement extends HTMLElement {
     }
   }
   /**
-   * Refreshes the element.
-   * Re-renders the element and updates the shadow DOM.
-   * 
-   * @returns {Promise<void>} A promise that resolves when the element has been refreshed.
+   * Refreshes the component by reinitializing it if it is in a drawing state.
+   * This method checks if the component's drawing status is at least in the START state.
+   * If so, it performs the following steps:
+   * 1. Calls the `beforeRedraw` hook if defined.
+   * 2. Calls the `beforeDisconnect` hook if defined.
+   * 3. Refreshes the update promise to manage the rendering lifecycle.
+   * 4. Calls the `afterDisconnect` hook if defined.
+   * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.
+   * If the component is not in a drawing state, it simply returns a resolved promise.
+   * @returns {Promise<void>} A promise that resolves when the refresh is complete.
    */
-  async refresh() {
+  refresh() {
     var _a, _b, _c;
     if (this.drawingStatus && this.drawingStatus >= this.drawingStatuses.START) {
       (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
@@ -645,39 +786,49 @@ const _WJElement = class _WJElement extends HTMLElement {
       (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
       return this.initWjElement(true);
     }
-  }
-  /**
-   * To be implemented by the child class
-   */
-  draw(context, store2, params) {
+    return Promise.resolve();
+  }
+  /**
+   * Renders the component within the provided context.
+   * @param context The rendering context, usually the element's shadow root or main DOM element.
+   * @param appStore The global application store for managing state.
+   * @param params Additional parameters or attributes for rendering the component.
+   * @returns This implementation does not render anything and returns `null`.
+   * @description
+   * The `draw` method is responsible for rendering the component's content.
+   * Override this method in subclasses to define custom rendering logic.
+   * @example
+   * class MyComponent extends WJElement {
+   *   draw(context, appStore, params) {
+   *     const div = document.createElement('div');
+   *     div.textContent = 'Hello, world!';
+   *     context.appendChild(div);
+   *   }
+   * }
+   */
+  draw(context, appStore, params) {
     return null;
   }
   /**
-   * Displays the element.
-   * 
-   * @param {boolean} [force=false] - Indicates whether to force the display of the element.
-   * @returns {Promise} - A promise that resolves when the element is rendered.
+   * Displays the component's content, optionally forcing a re-render.
+   * @param [force] Whether to force a re-render.
+   * @returns A promise that resolves when the display is complete.
    */
   display(force = false) {
+    this.template = this.constructor.customTemplate || document.createElement("template");
     if (force) {
       [...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));
       this.isAttached = false;
     }
     this.context.append(this.template.content.cloneNode(true));
-    if (this.isPermissionCheck || this.isShow) {
-      if (WjePermissionsApi.isPermissionFulfilled.bind(this)(this.permission)) {
-        this.drawingStatus = this.drawingStatuses.DRAWING;
-        return this._resolveRender();
-      } else {
-        this.remove();
-      }
-    } else {
-      return this._resolveRender();
+    if (this.noShow || this.isPermissionCheck && !WjePermissionsApi.isPermissionFulfilled(this.permission)) {
+      this.remove();
+      return Promise.resolve();
     }
+    return this._resolveRender();
   }
   /**
-   * Renders the element.
-   * @returns {Promise<void>} A promise that resolves when the rendering is complete.
+   * Renders the component's content.
    */
   async render() {
     this.drawingStatus = this.drawingStatuses.DRAWING;
@@ -690,29 +841,46 @@ const _WJElement = class _WJElement extends HTMLElement {
     if (rend instanceof HTMLElement || rend instanceof DocumentFragment) {
       element = rend;
     } else {
-      let template2 = document.createElement("template");
-      template2.innerHTML = rend;
-      element = template2.content.cloneNode(true);
+      let inputTemplate = document.createElement("template");
+      inputTemplate.innerHTML = rend;
+      element = inputTemplate.content.cloneNode(true);
     }
     let rendered = element;
     this.context.appendChild(rendered);
   }
   /**
-   * Turns a string split with "-" into camel case notation
+   * Sanitizes a given name by converting it from kebab-case to camelCase.
+   * @param {string} name The name in kebab-case format (e.g., "example-name").
+   * @returns {string} The sanitized name in camelCase format (e.g., "exampleName").
+   * @example
+   * // Returns 'exampleName'
+   * sanitizeName('example-name');
+   * @example
+   * // Returns 'myCustomComponent'
+   * sanitizeName('my-custom-component');
    */
   sanitizeName(name) {
     let parts = name.split("-");
     return [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join("");
   }
   /**
-   * Checks if an object has a getter and/or setter for a given property.
-   * 
-   * @param {Object} obj - The object to check.
-   * @param {string} property - The property to check for getter and/or setter.
-   * @returns {Object} - An object containing information about the getter and/or setter.
-   *                    - If the getter exists, it will be assigned to the `hasGetter` property.
-   *                    - If the setter exists, it will be assigned to the `hasSetter` property.
-   *                    - If neither getter nor setter exists, both `hasGetter` and `hasSetter` will be `null`.
+   * Checks if a property on an object has a getter or setter method defined.
+   * @param {object} obj The object on which the property is defined.
+   * @param {string} property The name of the property to check.
+   * @returns {object} An object indicating the presence of getter and setter methods.
+   * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.
+   * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.
+   * @example
+   * const obj = {
+   *   get name() { return 'value'; },
+   *   set name(val) { console.log(val); }
+   * };
+   * // Returns { hasGetter: [Function: get name], hasSetter: [Function: set name] }
+   * checkGetterSetter(obj, 'name');
+   * @example
+   * const obj = { prop: 42 };
+   * // Returns { hasGetter: null, hasSetter: null }
+   * checkGetterSetter(obj, 'prop');
    */
   checkGetterSetter(obj, property) {
     let descriptor = Object.getOwnPropertyDescriptor(obj, property);
@@ -729,8 +897,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     return { hasGetter: null, hasSetter: null };
   }
   /**
-   * Creates one property on this class for every
-   * HTML property defined on the element
+   * Sets up property accessors for the component's attributes.
    */
   setUpAccessors() {
     let attrs = this.getAttributeNames();
@@ -744,11 +911,11 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
   }
   /**
-   * Resolves the rendering of the element.
-   * 
-   * @returns {Promise<void>} A promise that resolves when the rendering is complete.
+   * Resolves the rendering process of the component.
+   * @returns A promise that resolves when rendering is complete.
+   * @private
    */
-  async _resolveRender() {
+  _resolveRender() {
     this.params = WjElementUtils.getAttributes(this);
     return new Promise(async (resolve, reject) => {
       var _a;
@@ -764,7 +931,9 @@ const _WJElement = class _WJElement extends HTMLElement {
       this.finisPromise();
       this.rendering = false;
       this.isAttached = true;
-      this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect);
+      if (this.removeClassAfterConnect) {
+        this.classList.remove(...this.removeClassAfterConnect);
+      }
       this.drawingStatus = this.drawingStatuses.DONE;
       resolve();
     }).catch((e) => {
@@ -772,9 +941,15 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
   }
 };
-__publicField(_WJElement, "processTemplates", (pTemplate, template2) => {
+/**
+ * Processes and combines two templates into one.
+ * @param pTemplate The primary template.
+ * @param inputTemplate The secondary template.
+ * @returns The combined template.
+ */
+__publicField(_WJElement, "processTemplates", (pTemplate, inputTemplate) => {
   const newTemplate = document.createElement("template");
-  newTemplate.innerHTML = [template2.innerHTML, (pTemplate == null ? void 0 : pTemplate.innerHTML) || ""].join("");
+  newTemplate.innerHTML = [inputTemplate.innerHTML, (pTemplate == null ? void 0 : pTemplate.innerHTML) || ""].join("");
   return newTemplate;
 });
 let WJElement = _WJElement;