wj-elements 0.1.155 → 0.1.157

package/dist/wje-dropdown.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
-import { P as Popup } from "./popup.element-tyYxow0p.js";
+import { P as Popup } from "./popup.element-AaduHP2r.js";
 class Dropdown extends WJElement {
   /**
    * Creates an instance of Dropdown.
@@ -32,6 +32,15 @@ class Dropdown extends WJElement {
         this.popup.hide();
       }
     });
+    __publicField(this, "popupHideCallback", () => {
+      if (this.classList.contains("active")) {
+        this.classList.remove("active");
+        event.dispatchCustomEvent(this, "wje-dropdown:close", {
+          bubbles: true,
+          detail: { target: this }
+        });
+      }
+    });
     /**
      * @summary Toggles the dropdown element between active and inactive states.
      * Calls the `onOpen` method if the element is currently inactive,
@@ -57,7 +66,7 @@ class Dropdown extends WJElement {
         if (!this.classList.contains("active")) {
           throw new Error("beforeShow method returned false or not string");
         }
-        this.popup.show();
+        this.popup.show(true);
         event.dispatchCustomEvent(this, "wje-dropdown:open", {
           bubbles: true,
           detail: { target: this }
@@ -65,19 +74,29 @@ class Dropdown extends WJElement {
         Promise.resolve(this.afterShow(this));
       }).catch((error) => {
         this.classList.remove("active");
-        this.popup.hide();
+        this.popup.hide(true);
       });
     });
-    /**
-     * Close the popup element.
-     * @param {object} e
-     */
+    __publicField(this, "beforeClose", () => {
+    });
+    __publicField(this, "afterClose", () => {
+    });
     __publicField(this, "onClose", (e) => {
+      e.stopPropagation();
       this.classList.remove("active");
-      this.popup.hide();
-      event.dispatchCustomEvent(this, "wje-dropdown:close", {
-        bubbles: true,
-        detail: { target: this }
+      Promise.resolve(this.beforeClose(this)).then((res) => {
+        if (this.classList.contains("active")) {
+          throw new Error("beforeShow method returned false or not string");
+        }
+        this.popup.hide(true);
+        event.dispatchCustomEvent(this, "wje-dropdown:close", {
+          bubbles: true,
+          detail: { target: this }
+        });
+        Promise.resolve(this.afterClose(this));
+      }).catch((error) => {
+        this.classList.add("active");
+        this.popup.show(true);
       });
     });
   }
@@ -151,14 +170,13 @@ class Dropdown extends WJElement {
     event.removeListener(this, "mouseenter", null, this.onOpen);
     event.removeListener(this, "mouseleave", null, this.onClose);
     event.removeListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: true });
+    event.removeListener(this, "wje-popup:hide", null, this.popupHideCallback);
   }
   /**
    * Adds event listeners for the mouseenter and mouseleave events.
    */
   afterDraw() {
-    event.addListener(this, "wje-popup:hide", null, () => {
-      this.classList.remove("active");
-    });
+    event.addListener(this, "wje-popup:hide", null, this.popupHideCallback);
     if (this.trigger !== "click") {
       event.addListener(this, "mouseenter", null, this.onOpen);
       event.addListener(this, "mouseleave", null, this.onClose);

package/dist/wje-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n\n        popup.appendChild(anchorSlot);\n        popup.appendChild(slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, () => {\n            this.classList.remove('active');\n        });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n    }\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        e.stopPropagation();\n        if (this.classList.contains('active')) {\n            this.onClose(e);\n        } else {\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        e.stopPropagation();\n\n        this.classList.add('active');\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Close the popup element.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        this.classList.remove('active');\n        this.popup.hide(); // Now close the popup\n\n        event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n            bubbles: true,\n            detail: { target: this },\n        });\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n\n        popup.appendChild(anchorSlot);\n        popup.appendChild(slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n    }\n\n    popupHideCallback = () => {\n        if (this.classList.contains('active')) {\n            this.classList.remove('active');\n\n            event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                bubbles: true,\n                detail: { target: this },\n            });\n        }\n    };\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n    }\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        e.stopPropagation();\n\n        if (this.classList.contains('active')) {\n            this.onClose(e);\n        } else {\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        e.stopPropagation();\n\n        this.classList.add('active');\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = (e) => {\n        e.stopPropagation();\n\n        this.classList.remove('active');\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}

package/dist/wje-element.js

@@ -275,7 +275,7 @@ var self;
 class Event {
   constructor() {
     __privateAdd(this, _Event_instances);
-    this.customEventStorage = [];
+    this.customEventWeakMap = /* @__PURE__ */ new WeakMap();
     self = this;
   }
   /**
@@ -303,13 +303,7 @@ class Event {
    * @returns {*}
    */
   findRecordByElement(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;
+    return this.customEventWeakMap.get(element);
   }
   /**
    * Add listener to the element. If the element is an array, the listener will be added to all elements in the array.
@@ -335,16 +329,14 @@ class Event {
    * @param options
    */
   writeRecord(element, originalEvent, event2, listener, options) {
-    let record = this.findRecordByElement(element);
-    if (record) {
-      record.listeners[originalEvent] = record.listeners[originalEvent] || [];
+    let recordListeners = this.findRecordByElement(element);
+    if (!recordListeners) {
+      this.customEventWeakMap.set(element, {
+        [originalEvent]: []
+      });
+      recordListeners = this.findRecordByElement(element);
     } else {
-      record = {
-        element,
-        listeners: {}
-      };
-      record.listeners[originalEvent] = [];
-      this.customEventStorage.push(record);
+      recordListeners[originalEvent] = recordListeners[originalEvent] || [];
     }
     listener = listener || __privateMethod(this, _Event_instances, dispatch_fn);
     let obj = {
@@ -353,8 +345,11 @@ class Event {
       event: event2
     };
     if (!this.listenerExists(element, originalEvent, obj)) {
-      record.listeners[originalEvent].push(obj);
+      recordListeners[originalEvent].push(obj);
       element.addEventListener(originalEvent, listener, options);
+      obj.unbind = () => {
+        element.removeEventListener(originalEvent, listener, options);
+      };
     }
   }
   /**
@@ -375,7 +370,7 @@ class Event {
    */
   listenerExists(element, event2, listener) {
     let record = this.findRecordByElement(element);
-    return record.listeners[event2].some((e) => this.deepEqual(e, listener));
+    return record[event2].some((e) => this.deepEqual(e, listener));
   }
   /**
    * Remove listener from the element and delete the listener from the custom event storage.
@@ -386,27 +381,36 @@ class Event {
    * @param options
    */
   removeListener(element, originalEvent, event2, listener, options) {
-    let record = this.findRecordByElement(element);
-    if (record && originalEvent in record.listeners) {
-      let index = record.listeners[originalEvent].indexOf(listener);
-      if (index !== -1) {
-        record.listeners[originalEvent].splice(index, 1);
+    let records = this.findRecordByElement(element);
+    let listeners = records == null ? void 0 : records[originalEvent];
+    listener = listener || __privateMethod(this, _Event_instances, dispatch_fn);
+    if (listeners) {
+      let listenerOfWeakMap = listeners.find((e) => e.listener === listener);
+      if (listenerOfWeakMap) {
+        listeners.splice(listeners.indexOf(listenerOfWeakMap), 1);
       }
-      if (!record.listeners[originalEvent].length) {
-        delete record.listeners[originalEvent];
+      if (!listeners.length) {
+        delete records[originalEvent];
       }
     }
-    listener = listener || __privateMethod(this, _Event_instances, dispatch_fn);
-    element.removeEventListener(originalEvent, listener, options);
+    element == null ? void 0 : 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) => {
-      return e.element !== element;
-    });
+    let listeners = this.customEventWeakMap.get(element);
+    if (listeners) {
+      queueMicrotask(() => {
+        for (let event2 in listeners) {
+          listeners[event2].forEach((e) => {
+            element.removeEventListener(event2, e.listener, e.options);
+          });
+        }
+        this.customEventWeakMap.delete(element);
+      });
+    }
   }
   // TODO
   createPromiseFromEvent(element, event2) {
@@ -426,15 +430,20 @@ _Event_instances = new WeakSet();
  */
 dispatch_fn = function(e) {
   let element = this;
-  let record = self.findRecordByElement(element);
-  let listeners = record.listeners[e.type];
+  let record = self.customEventWeakMap.get(this);
+  if (!record) return;
+  let listeners = record[e.type];
   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();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+    }
   });
 };
 let event = new Event();
@@ -462,6 +471,9 @@ const _WJElement = class _WJElement extends HTMLElement {
         this.setUpAccessors();
         this.drawingStatus = this.drawingStatuses.START;
         await this.display(force);
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(this.constructor.cssStyleSheet);
+        this.context.adoptedStyleSheets = [sheet];
         resolve();
       });
     });
@@ -482,7 +494,11 @@ const _WJElement = class _WJElement extends HTMLElement {
       DISCONNECTED: 6
     };
     this.drawingStatus = this.drawingStatuses.CREATED;
-    this.isInitializing = true;
+    this.refreshUpdatePromise();
+    this._pristine = true;
+    this._pristineCauseWeakMap = /* @__PURE__ */ new WeakMap();
+    this.isRendering = false;
+    this.rafId = null;
   }
   /**
    * Sets the value of the 'permission' attribute.
@@ -670,9 +686,6 @@ const _WJElement = class _WJElement extends HTMLElement {
    * Refreshes the update promise for rendering lifecycle management.
    */
   refreshUpdatePromise() {
-    if (this.updateComplete) {
-      this.rejectPromise("Update cancelled");
-    }
     this.updateComplete = new Promise((resolve, reject) => {
       this.finisPromise = resolve;
       this.rejectPromise = reject;
@@ -683,10 +696,16 @@ const _WJElement = class _WJElement extends HTMLElement {
    * Lifecycle method invoked when the component is connected to the DOM.
    */
   connectedCallback() {
+    var _a;
+    this.originalVisibility = this.style.visibility;
+    this.style.visibility = "hidden";
+    (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
+    this.setUpAccessors();
     this.drawingStatus = this.drawingStatuses.ATTACHED;
-    this.refreshUpdatePromise();
-    this.renderPromise = this.initWjElement(true);
-    this.isInitializing = false;
+    if (!this.isRendering) {
+      this._pristine = false;
+      this.enqueueUpdate();
+    }
   }
   /**
    * Sets up attributes and event listeners for the component.
@@ -728,6 +747,7 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   disconnectedCallback() {
     var _a, _b;
+    this.stopRenderLoop();
     (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
     if (this.isAttached) this.context.innerHTML = "";
     this.isAttached = false;
@@ -735,28 +755,14 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.drawingStatus = this.drawingStatuses.DISCONNECTED;
     this.componentCleanup();
   }
-  async processCurrentRenderPromise() {
-    var _a;
-    try {
-      if (this.renderPromise && (this.renderPromise instanceof Promise || ((_a = this.renderPromise) == null ? void 0 : _a.constructor.name) === "Promise")) {
-        await this.renderPromise;
-      }
-    } catch (e) {
-      console.error("An error occurred:", e);
-      Promise.reject(e);
-    }
-  }
   /**
-   * Enqueues an update to the component.
-   * @returns A promise that resolves when the update is complete.
+   * Enqueues an update for the component.
+   * This method processes the current render promise and then refreshes the component.
    */
-  async enqueueUpdate() {
-    await this.processCurrentRenderPromise();
-    const result = this._refresh();
-    if (result !== null) {
-      await result;
+  enqueueUpdate() {
+    if (!this.rafId) {
+      this.rafId = requestAnimationFrame(() => this._refresh());
     }
-    this.renderPromise = null;
   }
   /**
    * Lifecycle method invoked when an observed attribute changes.
@@ -765,12 +771,14 @@ const _WJElement = class _WJElement extends HTMLElement {
    * @param newName The new value of the attribute.
    */
   attributeChangedCallback(name, old, newName) {
-    if (old !== newName && !this.isInitializing) {
-      this.renderPromise = this.enqueueUpdate();
+    if (old !== newName) {
+      this._pristine = false;
+      this.enqueueUpdate();
     }
   }
   refresh() {
-    this.renderPromise = this.enqueueUpdate();
+    this._pristine = false;
+    this.enqueueUpdate();
   }
   /**
    * Refreshes the component by reinitializing it if it is in a drawing state.
@@ -782,18 +790,47 @@ const _WJElement = class _WJElement extends HTMLElement {
    * 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() {
+  async _refresh() {
     var _a, _b, _c;
-    if (this.drawingStatus && this.drawingStatus >= this.drawingStatuses.START) {
-      (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
-      (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
-      this.refreshUpdatePromise();
-      (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
-      return this.initWjElement(true);
+    if (this.isRendering) {
+      this.rafId = requestAnimationFrame(() => this._refresh());
+      return;
+    }
+    if (!this._pristine) {
+      this._pristine = true;
+      this.isRendering = true;
+      if (this.isAttached) {
+        (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
+        (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
+        this.refreshUpdatePromise();
+        (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
+      } else {
+        this.stopRenderLoop();
+      }
+      try {
+        await this.initWjElement(true);
+      } catch (error) {
+        console.error("Render error:", error);
+      } finally {
+        this.isRendering = false;
+        if (!this._pristine) {
+          this._pristine = false;
+          this.enqueueUpdate();
+        } else {
+          this.style.visibility = this.originalVisibility;
+        }
+      }
+    }
+    if (this.isAttached && !this.isRendering) {
+      this.rafId = requestAnimationFrame(() => this._refresh());
+    }
+  }
+  stopRenderLoop() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
     }
-    return Promise.resolve();
   }
   /**
    * Renders the component within the provided context.
@@ -825,7 +862,6 @@ const _WJElement = class _WJElement extends HTMLElement {
     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.noShow || this.isPermissionCheck && !WjePermissionsApi.isPermissionFulfilled(this.permission)) {
@@ -840,7 +876,7 @@ const _WJElement = class _WJElement extends HTMLElement {
   async render() {
     this.drawingStatus = this.drawingStatuses.DRAWING;
     let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
-    if (_draw instanceof Promise || (_draw == null ? void 0 : _draw.constructor.name) === "Promise") {
+    if (_draw instanceof Promise) {
       _draw = await _draw;
     }
     let rend = _draw;
@@ -927,15 +963,12 @@ const _WJElement = class _WJElement extends HTMLElement {
     return new Promise(async (resolve, reject) => {
       var _a;
       const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__beforeDraw instanceof Promise || (__beforeDraw == null ? void 0 : __beforeDraw.constructor.name) === "Promise") {
+      if (__beforeDraw instanceof Promise) {
         await __beforeDraw;
       }
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(this.constructor.cssStyleSheet);
-      this.context.adoptedStyleSheets = [sheet];
       await this.render();
       const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__afterDraw instanceof Promise || (__afterDraw == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
+      if (__afterDraw instanceof Promise) {
         await __afterDraw;
       }
       this.finisPromise();