wj-elements 0.1.129 → 0.1.130

package/dist/wje-element.js

@@ -133,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.
@@ -171,39 +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 {
   /**
-   * 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]) => {
@@ -211,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]) => {
@@ -253,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`);
@@ -280,13 +262,12 @@ class WjElementUtils {
     return false;
   }
   /**
-   * This function converts a string to a boolean
-   * @param value
-   * @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(value) {
-    if (typeof value === "boolean")
-      return value;
+    if (typeof value === "boolean") return value;
     return !["false", "0", 0].includes(value);
   }
 }
@@ -298,7 +279,7 @@ class Event {
     self = this;
   }
   /**
-   * Dispatch custom event
+   * Dispatch custom event to the element with the specified event name and detail.
    * @param element
    * @param event
    * @param detail
@@ -317,9 +298,9 @@ class Event {
     );
   }
   /**
-   * Find record by element
+   * Find record by element in the storage.
    * @param element
-   * @returns {*|boolean}
+   * @returns {*}
    */
   findRecordByElement(element) {
     for (let index = 0, length = this.customEventStorage.length; index < length; index++) {
@@ -331,7 +312,7 @@ class Event {
     return false;
   }
   /**
-   * Add listener to the element
+   * 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
@@ -339,16 +320,14 @@ class Event {
    * @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
+   * Write record to the storage.
    * @param element
    * @param originalEvent
    * @param event
@@ -380,27 +359,26 @@ 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
+   * Check if the listener already exists on the element.
    * @param element
    * @param event
    * @param listener
-   * @returns {*}
+   * @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
+   * Remove listener from the element and delete the listener from the custom event storage.
    * @param element
    * @param originalEvent
    * @param event
@@ -422,8 +400,8 @@ class Event {
     element.removeEventListener(originalEvent, listener, options);
   }
   /**
-   * Remove all listeners from the element
-   * @param element
+   * 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) => {
@@ -443,7 +421,7 @@ class Event {
 }
 _Event_instances = new WeakSet();
 /**
- * Dispatch event to the element
+ * Dispatch event to the element and trigger the listener.
  * @param e
  */
 dispatch_fn = function(e) {
@@ -456,8 +434,7 @@ dispatch_fn = function(e) {
       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();
@@ -466,16 +443,13 @@ template.innerHTML = ``;
 const _WJElement = class _WJElement extends HTMLElement {
   /**
    * Initializes a new instance of the WJElement class.
-   *
-   * @param {HTMLTemplateElement} [componentTemplate] - The template to use for this component.
    */
-  constructor(componentTemplate) {
+  constructor() {
     super();
     /**
      * Initializes the component, setting up attributes and rendering.
-     *
-     * @param {boolean} [force=false] - Whether to force initialization.
-     * @return {Promise<void>} A promise that resolves when initialization is complete.
+     * @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) => {
@@ -483,8 +457,7 @@ const _WJElement = class _WJElement extends HTMLElement {
         this.drawingStatus = this.drawingStatuses.BEGINING;
         (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
         if (this.isShadowRoot) {
-          if (!this.shadowRoot)
-            this.attachShadow({ mode: this.shadowType || "open" });
+          if (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || "open" });
         }
         this.setUpAccessors();
         this.drawingStatus = this.drawingStatuses.START;
@@ -495,7 +468,6 @@ const _WJElement = class _WJElement extends HTMLElement {
         resolve();
       });
     });
-    this.template = componentTemplate || template;
     this.isAttached = false;
     this.service = new UniversalService({
       store
@@ -514,66 +486,71 @@ const _WJElement = class _WJElement extends HTMLElement {
     };
     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.
-   *
-   * @return {string|null} The value of the 'permission-check' attribute or null if not set.
+   * @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 {string} shadow - The value to set for the 'permission-check' attribute.
+   * @param {boolean} value The value to set for the 'permission-check' attribute.
    */
-  set isPermissionCheck(shadow) {
-    return this.setAttribute("permission-check", "permission-check");
+  set isPermissionCheck(value) {
+    if (value) this.setAttribute("permission-check", "");
+    else this.removeAttribute("permission-check");
   }
   /**
    * Checks if the 'permission-check' attribute is present.
-   *
-   * @return {boolean} True 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 noShow(value) {
+    if (value) this.setAttribute("no-show", "");
+    else this.removeAttribute("no-show");
+  }
   /**
    * Checks if the 'show' attribute is present.
-   *
-   * @return {boolean} True if the 'show' attribute is present.
+   * @returns {boolean} True if the 'show' attribute is present.
    */
-  get isShow() {
-    return this.hasAttribute("show");
+  get noShow() {
+    return this.hasAttribute("no-show");
   }
   /**
    * Sets the 'shadow' attribute.
-   *
-   * @param {string} shadow - The value to set for 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.
-   *
-   * @return {boolean} True if the 'shadow' attribute is present.
+   * @returns {boolean} True if the 'shadow' attribute is present.
    */
   get isShadowRoot() {
     return this.hasAttribute("shadow");
   }
   /**
    * Gets the value of the 'shadow' attribute or 'open' if not set.
-   *
-   * @return {string} The value of the 'shadow' attribute or 'open'.
+   * @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.
-   *
-   * @return {HTMLElement|ShadowRoot} The rendering context.
+   * @returns The rendering context.
    */
   get context() {
     if (this.isShadowRoot) {
@@ -584,38 +561,35 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Gets the store instance.
-   *
-   * @return {Object} The store instance.
+   * @returns {object} The store instance.
    */
   get store() {
     return store;
   }
   /**
-   * @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} 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 - Replace old object with new object
-   * @property {function} deleteAction - Delete item based on key
-   * @property {function} updateAction - Update item based on key
+   * @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
    */
   /**
    * Gets the default store actions.
-   *
-   * @return {ArrayActions|ObjectActions} 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.
-   *
-   * @return {Array<string>} An array of class names to remove.
+   * @returns An array of class names to remove.
    */
   get removeClassAfterConnect() {
     var _a;
@@ -623,26 +597,23 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Sets the component dependencies.
-   *
-   * @param {Object} value - The dependencies to set.
+   * @param value The dependencies to set.
    */
   set dependencies(value) {
     this._dependencies = value;
   }
   /**
    * Gets the component dependencies.
-   *
-   * @return {Object} The dependencies.
+   * @returns The component dependencies.
    */
   get dependencies() {
     return this._dependencies;
   }
   /**
    * Defines a custom element if not already defined.
-   *
-   * @param {string} name - The name of the custom element.
-   * @param {WJElement} [elementConstructor=this] - The element constructor.
-   * @param {Object} [options={}] - Additional options for defining the element.
+   * @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);
@@ -659,21 +630,40 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Hook for extending behavior before drawing the component.
-   *
-   * @param {HTMLElement} context - The rendering context.
-   * @param {Object} store - The store instance.
-   * @param {Object} attributes - The component attributes.
-   */
-  beforeDraw(context, appStore, attributes) {
+   * @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;
   }
   /**
    * Hook for extending behavior after drawing the component.
-   *
-   * @param {HTMLElement} context - The rendering context.
-   * @param {Object} store - The store instance.
-   * @param {Object} attributes - The component attributes.
+   * @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, appStore, attributes) {
+  afterDraw(context, appStoreObj, params) {
   }
   /**
    * Refreshes the update promise for rendering lifecycle management.
@@ -700,6 +690,9 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * 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);
@@ -744,8 +737,7 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Enqueues an update to the component.
-   *
-   * @return {Promise<void>} A promise that resolves when the update is complete.
+   * @returns A promise that resolves when the update is complete.
    */
   async enqueueUpdate() {
     try {
@@ -764,10 +756,9 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Lifecycle method invoked when an observed attribute changes.
-   *
-   * @param {string} name - The attribute name.
-   * @param {string} old - The old value of the attribute.
-   * @param {string} newName - The new value of the attribute.
+   * @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) {
@@ -775,9 +766,16 @@ const _WJElement = class _WJElement extends HTMLElement {
     }
   }
   /**
-   * Refreshes the component.
-   *
-   * @return {Promise<void>} A promise that resolves when the refresh is complete.
+   * 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.
    */
   refresh() {
     var _a, _b, _c;
@@ -791,39 +789,43 @@ const _WJElement = class _WJElement extends HTMLElement {
     return Promise.resolve();
   }
   /**
-   * Draws the component's content.
-   *
-   * @param {HTMLElement} context - The rendering context.
-   * @param {Object} appStore - The store instance.
-   * @param {Object} params - Parameters for drawing.
-   * @return {DocumentFragment|HTMLElement|string|null} The rendered content.
+   * 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 component's content, optionally forcing a re-render.
-   *
-   * @param {boolean} [force=false] - Whether to force a re-render.
-   * @return {Promise<void>} A promise that resolves when the display is complete.
+   * @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();
-        return Promise.resolve();
-      }
-    } else {
-      return this._resolveRender();
+    if (this.noShow || this.isPermissionCheck && !WjePermissionsApi.isPermissionFulfilled(this.permission)) {
+      this.remove();
+      return Promise.resolve();
     }
+    return this._resolveRender();
   }
   /**
    * Renders the component's content.
@@ -847,21 +849,38 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.context.appendChild(rendered);
   }
   /**
-   * Converts a hyphenated string to camelCase.
-   *
-   * @param {string} name - The string to sanitize.
-   * @return {string} The camelCase version of the string.
+   * 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 property has a getter or setter.
-   *
-   * @param {Object} obj - The object to check.
-   * @param {string} property - The property name.
-   * @return {Object} An object containing references to the getter and setter, if they exist.
+   * 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);
@@ -893,8 +912,7 @@ const _WJElement = class _WJElement extends HTMLElement {
   }
   /**
    * Resolves the rendering process of the component.
-   *
-   * @return {Promise<void>} A promise that resolves when rendering is complete.
+   * @returns A promise that resolves when rendering is complete.
    * @private
    */
   _resolveRender() {
@@ -913,8 +931,9 @@ const _WJElement = class _WJElement extends HTMLElement {
       this.finisPromise();
       this.rendering = false;
       this.isAttached = true;
-      if (this.removeClassAfterConnect)
+      if (this.removeClassAfterConnect) {
         this.classList.remove(...this.removeClassAfterConnect);
+      }
       this.drawingStatus = this.drawingStatuses.DONE;
       resolve();
     }).catch((e) => {
@@ -924,10 +943,9 @@ const _WJElement = class _WJElement extends HTMLElement {
 };
 /**
  * Processes and combines two templates into one.
- *
- * @param {HTMLTemplateElement} pTemplate - The primary template.
- * @param {HTMLTemplateElement|null} inputTemplate - The secondary template.
- * @return {HTMLTemplateElement} The combined template.
+ * @param pTemplate The primary template.
+ * @param inputTemplate The secondary template.
+ * @returns The combined template.
  */
 __publicField(_WJElement, "processTemplates", (pTemplate, inputTemplate) => {
   const newTemplate = document.createElement("template");