wj-elements 0.1.128 → 0.1.129

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) {
@@ -217,8 +200,6 @@ class WjePermissionsApi {
   }
 }
 class WjElementUtils {
-  constructor() {
-  }
   /**
    * This function creates an element
    * @param element : HTMLElement
@@ -238,7 +219,7 @@ class WjElementUtils {
     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) {
+      if (i !== 0) {
         return s.charAt(0).toUpperCase() + s.slice(1);
       } else {
         return s;
@@ -300,11 +281,13 @@ class WjElementUtils {
   }
   /**
    * This function converts a string to a boolean
-   * @param string
+   * @param value
    * @returns {boolean}
    */
-  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 +297,12 @@ class Event {
     this.customEventStorage = [];
     self = this;
   }
+  /**
+   * Dispatch custom event
+   * @param element
+   * @param event
+   * @param detail
+   */
   dispatchCustomEvent(element, event2, detail) {
     element.dispatchEvent(
       new CustomEvent(event2, {
@@ -322,19 +311,33 @@ class Event {
           event: self
         },
         bubbles: true,
-        composed: true
+        composed: true,
+        cancelable: true
       })
     );
   }
+  /**
+   * Find record by element
+   * @param element
+   * @returns {*|boolean}
+   */
   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
+   * @param element
+   * @param originalEvent
+   * @param event
+   * @param listener
+   * @param options
+   */
   addListener(element, originalEvent, event2, listener, options) {
     if (!element)
       return;
@@ -344,6 +347,14 @@ class Event {
       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) {
@@ -377,15 +388,30 @@ class Event {
   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
+   * @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
+   * @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 +421,13 @@ class Event {
     listener = listener || __privateMethod(this, _Event_instances, dispatch_fn);
     element.removeEventListener(originalEvent, listener, options);
   }
+  /**
+   * Remove all listeners from the element
+   * @param element
+   */
   removeElement(element) {
     this.customEventStorage = this.customEventStorage.filter((e) => {
-      if (e.element !== element)
-        return e;
+      return e.element !== element;
     });
   }
   // TODO
@@ -413,11 +442,15 @@ class Event {
   }
 }
 _Event_instances = new WeakSet();
+/**
+ * Dispatch event to the element
+ * @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,
@@ -431,24 +464,34 @@ let event = new Event();
 const template = document.createElement("template");
 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) {
     super();
-    __publicField(this, "initWjElement", async (force = false) => {
+    /**
+     * 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.
+     */
+    __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();
       });
     });
@@ -461,6 +504,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.rendering = false;
     this._dependencies = {};
     this.drawingStatuses = {
+      CREATED: 0,
       ATTACHED: 1,
       BEGINING: 2,
       START: 3,
@@ -468,28 +512,69 @@ const _WJElement = class _WJElement extends HTMLElement {
       DONE: 5,
       DISCONNECTED: 6
     };
+    this.drawingStatus = this.drawingStatuses.CREATED;
   }
+  /**
+   * Gets the value of the 'permission-check' attribute.
+   *
+   * @return {string|null} The value of the 'permission-check' attribute or null if not set.
+   */
   get permission() {
     return this.getAttribute("permission-check");
   }
-  get isPermissionCheck() {
-    return this.hasAttribute("permission-check");
-  }
+  /**
+   * Sets the 'permission-check' attribute.
+   *
+   * @param {string} shadow - The value to set for the 'permission-check' attribute.
+   */
   set isPermissionCheck(shadow) {
     return this.setAttribute("permission-check", "permission-check");
   }
+  /**
+   * Checks if the 'permission-check' attribute is present.
+   *
+   * @return {boolean} True if the 'permission-check' attribute is present.
+   */
+  get isPermissionCheck() {
+    return this.hasAttribute("permission-check");
+  }
+  /**
+   * Checks if the 'show' attribute is present.
+   *
+   * @return {boolean} True if the 'show' attribute is present.
+   */
   get isShow() {
     return this.hasAttribute("show");
   }
+  /**
+   * Sets the 'shadow' attribute.
+   *
+   * @param {string} shadow - 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.
+   */
   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.
+   *
+   * @return {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.
+   */
   get context() {
     if (this.isShadowRoot) {
       return this.shadowRoot;
@@ -497,65 +582,112 @@ const _WJElement = class _WJElement extends HTMLElement {
       return this;
     }
   }
+  /**
+   * Gets the store instance.
+   *
+   * @return {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.
+   * @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.
+   * @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.
+   *
+   * @return {ArrayActions|ObjectActions} The default store actions.
    */
   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.
+   */
   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 {Object} value - The dependencies to set.
+   */
   set dependencies(value) {
     this._dependencies = value;
   }
+  /**
+   * Gets the component dependencies.
+   *
+   * @return {Object} The 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.
+   */
   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 {HTMLElement} context - The rendering context.
+   * @param {Object} store - The store instance.
+   * @param {Object} attributes - The component attributes.
+   */
+  beforeDraw(context, appStore, attributes) {
   }
-  afterDraw() {
+  /**
+   * 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.
+   */
+  afterDraw(context, appStore, attributes) {
   }
+  /**
+   * 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 +698,9 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.refreshUpdatePromise();
     this.renderPromise = this.initWjElement(true);
   }
+  /**
+   * Sets up attributes and event listeners for the component.
+   */
   setupAttributes() {
     let allEvents = WjElementUtils.getEvents(this);
     allEvents.forEach((customEvent, domEvent) => {
@@ -576,25 +711,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 +742,32 @@ 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.
+   *
+   * @return {Promise<void>} 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 {string} name - The attribute name.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
    */
   attributeChangedCallback(name, old, newName) {
     if (old !== newName) {
@@ -631,12 +775,11 @@ 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.
+   *
+   * @return {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,18 +788,24 @@ const _WJElement = class _WJElement extends HTMLElement {
       (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
       return this.initWjElement(true);
     }
+    return Promise.resolve();
   }
   /**
-   * To be implemented by the child class
+   * 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.
    */
-  draw(context, store2, params) {
+  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 {boolean} [force=false] - Whether to force a re-render.
+   * @return {Promise<void>} A promise that resolves when the display is complete.
    */
   display(force = false) {
     if (force) {
@@ -670,14 +819,14 @@ const _WJElement = class _WJElement extends HTMLElement {
         return this._resolveRender();
       } else {
         this.remove();
+        return Promise.resolve();
       }
     } else {
       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 +839,29 @@ 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
+   * Converts a hyphenated string to camelCase.
+   *
+   * @param {string} name - The string to sanitize.
+   * @return {string} The camelCase version of the string.
    */
   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.
-   * 
+   * Checks if an object property has a getter or setter.
+   *
    * @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`.
+   * @param {string} property - The property name.
+   * @return {Object} An object containing references to the getter and setter, if they exist.
    */
   checkGetterSetter(obj, property) {
     let descriptor = Object.getOwnPropertyDescriptor(obj, property);
@@ -729,8 +878,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 +892,12 @@ 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.
+   *
+   * @return {Promise<void>} 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 +913,8 @@ 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 +922,16 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
   }
 };
-__publicField(_WJElement, "processTemplates", (pTemplate, template2) => {
+/**
+ * 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.
+ */
+__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;