add-to-calendar-button 2.6.2 → 2.6.3

package/assets/css/atcb-3d.css

@@ -5,7 +5,7 @@
  *
  * Style: 3D
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb-date.css

@@ -5,7 +5,7 @@
  *
  * Style: Date
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb-flat.css

@@ -5,7 +5,7 @@
  *
  * Style: Flat
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb-neumorphism.css

@@ -5,7 +5,7 @@
  *
  * Style: Neumorphism
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb-round.css

@@ -5,7 +5,7 @@
  *
  * Style: Round
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb-text.css

@@ -5,7 +5,7 @@
  *
  * Style: Text
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/assets/css/atcb.css

@@ -5,7 +5,7 @@
  *
  * Style: Default
  *
- * Version: 2.6.2
+ * Version: 2.6.3
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

package/dist/atcb-no-pro-unstyle.js

@@ -974,14 +974,14 @@ function tzlib_get_timezones(jsonType = false) {
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.6.2
+ *  Version: 2.6.3
  *  Creator: Jens Kuerschner (https://jekuer.com)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)
  *  Note:    DO NOT REMOVE THE COPYRIGHT NOTICE ABOVE!
  *
  */
-const atcbVersion = '2.6.2';
+const atcbVersion = '2.6.3';
 const atcbCssTemplate = {};
 const atcbIsBrowser = () => {
   if (typeof window === 'undefined') {
@@ -4960,12 +4960,19 @@ if (atcbIsBrowser()) {
       elem.innerHTML = template;
       this.attachShadow({ mode: 'open', delegateFocus: true });
       this.shadowRoot.append(elem.content.cloneNode(true));
-      this.loaded = false;
-      this.initialized = false;
+      this.state = {
+        initializing: false,
+        ready: false,
+        updatePending: false,
+      };
       this.data = {};
       this.error = false;
     }
     async connectedCallback() {
+      if (this.state.initializing || this.state.ready) {
+        return;
+      }
+      this.state.initializing = true;
       const debugVal = this.getAttribute('debug');
       this.debug = this.hasAttribute('debug') && (!debugVal || debugVal === 'true' || debugVal === '') ? true : false;
       if ((this.hasAttribute('proKey') && this.getAttribute('proKey') !== '') || (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '')) {
@@ -4986,19 +4993,21 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
-          this.loaded = true;
+          this.state.initializing = false;
           return;
         }
       }
-      this.loaded = true;
       await this.initButton();
+      this.state.initializing = false;
+      this.state.ready = true;
+      return;
     }
     disconnectedCallback() {
-      atcb_cleanup(this.shadowRoot, this.data);
+      atcb_cleanup(this.shadowRoot, this.identifier);
       if (this.debug) {
-        console.log('Add to Calendar Button "' + this.data.identifier + '" destroyed');
+        console.log('Add to Calendar Button "' + this.identifier + '" destroyed');
       }
-      if (document.querySelectorAll('add-to-calendar-button').length == 0) {
+      if (document.querySelectorAll('add-to-calendar-button').length === 0) {
         atcbBtnCount = 0;
       }
     }
@@ -5017,14 +5026,20 @@ if (atcbIsBrowser()) {
         })
         .concat(observeAdditionally);
     }
-    async attributeChangedCallback(name, oldValue, newValue) {
-      if (!this.loaded) {
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.state.initializing || !this.state.ready) {
         return;
       }
-      if (this.debug && this.initialized) {
+      if (this.debug && this.state.ready) {
         console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
       }
-      atcb_cleanup(this.shadowRoot, this.data);
+      if (!this.updatePending) {
+        this.updatePending = true;
+        setTimeout(() => this.updateComponent(), 0);
+      }
+    }
+    async updateComponent() {
+      if (!this.updatePending) return;
       this.data = {};
       this.shadowRoot.querySelector('.atcb-initialized').remove();
       const elem = document.createElement('template');
@@ -5034,7 +5049,7 @@ if (atcbIsBrowser()) {
         this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       } else if (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '') {
-        this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
+        this.data = await atcb_get_pro_data(this.getAttribute('prokey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       }
       if (!this.data.name || this.data.name === '') {
@@ -5045,20 +5060,22 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
+          this.updatePending = false;
           return;
         }
       }
+      atcb_cleanup(this.shadowRoot, this.identifier);
       await this.initButton();
+      this.updatePending = false;
     }
     async initButton() {
-      if (!this.initialized) {
-        this.initialized = true;
+      if (!this.state.ready) {
         atcbBtnCount = atcbBtnCount + 1;
       }
-      if (this.identifier && this.identifier != '') {
+      if (this.identifier && this.identifier !== '') {
         this.data.identifier = this.identifier;
       } else {
-        if (this.data.identifier && this.data.identifier != '') {
+        if (this.data.identifier && this.data.identifier !== '') {
           if (!/^[\w\-_]+$/.test(this.data.identifier)) {
             this.data.identifier = '';
             if (this.debug) {
@@ -5203,10 +5220,10 @@ async function atcb_build_button(host, data) {
     throw new Error(e.message);
   }
 }
-function atcb_cleanup(host, data) {
+function atcb_cleanup(host, identifier) {
   atcb_close(host);
-  atcb_unset_global_event_listener(data.identifier);
-  const schemaEl = document.getElementById('atcb-schema-' + data.identifier);
+  atcb_unset_global_event_listener(identifier);
+  const schemaEl = document.getElementById('atcb-schema-' + identifier);
   if (schemaEl) {
     schemaEl.remove();
   }
@@ -5216,7 +5233,7 @@ function atcb_cleanup(host, data) {
     .concat(Array.from(host.querySelectorAll('.atcb-placeholder')))
     .concat(Array.from(host.querySelectorAll('.atcb-button-wrapper')))
     .forEach((el) => el.remove());
-  delete atcbStates[`${data.identifier}`];
+  delete atcbStates[`${identifier}`];
 }
 function atcb_set_light_mode(shadowRoot, data) {
   shadowRoot.host.classList.remove('atcb-dark', 'atcb-light', 'atcb-bodyScheme');

package/dist/atcb-no-pro.js

@@ -974,14 +974,14 @@ function tzlib_get_timezones(jsonType = false) {
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.6.2
+ *  Version: 2.6.3
  *  Creator: Jens Kuerschner (https://jekuer.com)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)
  *  Note:    DO NOT REMOVE THE COPYRIGHT NOTICE ABOVE!
  *
  */
-const atcbVersion = '2.6.2';
+const atcbVersion = '2.6.3';
 const atcbCssTemplate = {
   if (typeof window === 'undefined') {
     return false;
@@ -4959,12 +4959,19 @@ if (atcbIsBrowser()) {
       elem.innerHTML = template;
       this.attachShadow({ mode: 'open', delegateFocus: true });
       this.shadowRoot.append(elem.content.cloneNode(true));
-      this.loaded = false;
-      this.initialized = false;
+      this.state = {
+        initializing: false,
+        ready: false,
+        updatePending: false,
+      };
       this.data = {};
       this.error = false;
     }
     async connectedCallback() {
+      if (this.state.initializing || this.state.ready) {
+        return;
+      }
+      this.state.initializing = true;
       const debugVal = this.getAttribute('debug');
       this.debug = this.hasAttribute('debug') && (!debugVal || debugVal === 'true' || debugVal === '') ? true : false;
       if ((this.hasAttribute('proKey') && this.getAttribute('proKey') !== '') || (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '')) {
@@ -4985,19 +4992,21 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
-          this.loaded = true;
+          this.state.initializing = false;
           return;
         }
       }
-      this.loaded = true;
       await this.initButton();
+      this.state.initializing = false;
+      this.state.ready = true;
+      return;
     }
     disconnectedCallback() {
-      atcb_cleanup(this.shadowRoot, this.data);
+      atcb_cleanup(this.shadowRoot, this.identifier);
       if (this.debug) {
-        console.log('Add to Calendar Button "' + this.data.identifier + '" destroyed');
+        console.log('Add to Calendar Button "' + this.identifier + '" destroyed');
       }
-      if (document.querySelectorAll('add-to-calendar-button').length == 0) {
+      if (document.querySelectorAll('add-to-calendar-button').length === 0) {
         atcbBtnCount = 0;
       }
     }
@@ -5016,14 +5025,20 @@ if (atcbIsBrowser()) {
         })
         .concat(observeAdditionally);
     }
-    async attributeChangedCallback(name, oldValue, newValue) {
-      if (!this.loaded) {
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.state.initializing || !this.state.ready) {
         return;
       }
-      if (this.debug && this.initialized) {
+      if (this.debug && this.state.ready) {
         console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
       }
-      atcb_cleanup(this.shadowRoot, this.data);
+      if (!this.updatePending) {
+        this.updatePending = true;
+        setTimeout(() => this.updateComponent(), 0);
+      }
+    }
+    async updateComponent() {
+      if (!this.updatePending) return;
       this.data = {};
       this.shadowRoot.querySelector('.atcb-initialized').remove();
       const elem = document.createElement('template');
@@ -5033,7 +5048,7 @@ if (atcbIsBrowser()) {
         this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       } else if (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '') {
-        this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
+        this.data = await atcb_get_pro_data(this.getAttribute('prokey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       }
       if (!this.data.name || this.data.name === '') {
@@ -5044,20 +5059,22 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
+          this.updatePending = false;
           return;
         }
       }
+      atcb_cleanup(this.shadowRoot, this.identifier);
       await this.initButton();
+      this.updatePending = false;
     }
     async initButton() {
-      if (!this.initialized) {
-        this.initialized = true;
+      if (!this.state.ready) {
         atcbBtnCount = atcbBtnCount + 1;
       }
-      if (this.identifier && this.identifier != '') {
+      if (this.identifier && this.identifier !== '') {
         this.data.identifier = this.identifier;
       } else {
-        if (this.data.identifier && this.data.identifier != '') {
+        if (this.data.identifier && this.data.identifier !== '') {
           if (!/^[\w\-_]+$/.test(this.data.identifier)) {
             this.data.identifier = '';
             if (this.debug) {
@@ -5202,10 +5219,10 @@ async function atcb_build_button(host, data) {
     throw new Error(e.message);
   }
 }
-function atcb_cleanup(host, data) {
+function atcb_cleanup(host, identifier) {
   atcb_close(host);
-  atcb_unset_global_event_listener(data.identifier);
-  const schemaEl = document.getElementById('atcb-schema-' + data.identifier);
+  atcb_unset_global_event_listener(identifier);
+  const schemaEl = document.getElementById('atcb-schema-' + identifier);
   if (schemaEl) {
     schemaEl.remove();
   }
@@ -5215,7 +5232,7 @@ function atcb_cleanup(host, data) {
     .concat(Array.from(host.querySelectorAll('.atcb-placeholder')))
     .concat(Array.from(host.querySelectorAll('.atcb-button-wrapper')))
     .forEach((el) => el.remove());
-  delete atcbStates[`${data.identifier}`];
+  delete atcbStates[`${identifier}`];
 }
 function atcb_set_light_mode(shadowRoot, data) {
   shadowRoot.host.classList.remove('atcb-dark', 'atcb-light', 'atcb-bodyScheme');

package/dist/atcb-unstyle.js

@@ -974,14 +974,14 @@ function tzlib_get_timezones(jsonType = false) {
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.6.2
+ *  Version: 2.6.3
  *  Creator: Jens Kuerschner (https://jekuer.com)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)
  *  Note:    DO NOT REMOVE THE COPYRIGHT NOTICE ABOVE!
  *
  */
-const atcbVersion = '2.6.2';
+const atcbVersion = '2.6.3';
 const atcbCssTemplate = {};
 const atcbIsBrowser = () => {
   if (typeof window === 'undefined') {
@@ -5652,12 +5652,19 @@ if (atcbIsBrowser()) {
       elem.innerHTML = template;
       this.attachShadow({ mode: 'open', delegateFocus: true });
       this.shadowRoot.append(elem.content.cloneNode(true));
-      this.loaded = false;
-      this.initialized = false;
+      this.state = {
+        initializing: false,
+        ready: false,
+        updatePending: false,
+      };
       this.data = {};
       this.error = false;
     }
     async connectedCallback() {
+      if (this.state.initializing || this.state.ready) {
+        return;
+      }
+      this.state.initializing = true;
       const debugVal = this.getAttribute('debug');
       this.debug = this.hasAttribute('debug') && (!debugVal || debugVal === 'true' || debugVal === '') ? true : false;
       if ((this.hasAttribute('proKey') && this.getAttribute('proKey') !== '') || (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '')) {
@@ -5678,19 +5685,21 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
-          this.loaded = true;
+          this.state.initializing = false;
           return;
         }
       }
-      this.loaded = true;
       await this.initButton();
+      this.state.initializing = false;
+      this.state.ready = true;
+      return;
     }
     disconnectedCallback() {
-      atcb_cleanup(this.shadowRoot, this.data);
+      atcb_cleanup(this.shadowRoot, this.identifier);
       if (this.debug) {
-        console.log('Add to Calendar Button "' + this.data.identifier + '" destroyed');
+        console.log('Add to Calendar Button "' + this.identifier + '" destroyed');
       }
-      if (document.querySelectorAll('add-to-calendar-button').length == 0) {
+      if (document.querySelectorAll('add-to-calendar-button').length === 0) {
         atcbBtnCount = 0;
       }
     }
@@ -5709,14 +5718,20 @@ if (atcbIsBrowser()) {
         })
         .concat(observeAdditionally);
     }
-    async attributeChangedCallback(name, oldValue, newValue) {
-      if (!this.loaded) {
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.state.initializing || !this.state.ready) {
         return;
       }
-      if (this.debug && this.initialized) {
+      if (this.debug && this.state.ready) {
         console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
       }
-      atcb_cleanup(this.shadowRoot, this.data);
+      if (!this.updatePending) {
+        this.updatePending = true;
+        setTimeout(() => this.updateComponent(), 0);
+      }
+    }
+    async updateComponent() {
+      if (!this.updatePending) return;
       this.data = {};
       this.shadowRoot.querySelector('.atcb-initialized').remove();
       const elem = document.createElement('template');
@@ -5726,7 +5741,7 @@ if (atcbIsBrowser()) {
         this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       } else if (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '') {
-        this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
+        this.data = await atcb_get_pro_data(this.getAttribute('prokey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       }
       if (!this.data.name || this.data.name === '') {
@@ -5737,20 +5752,22 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
+          this.updatePending = false;
           return;
         }
       }
+      atcb_cleanup(this.shadowRoot, this.identifier);
       await this.initButton();
+      this.updatePending = false;
     }
     async initButton() {
-      if (!this.initialized) {
-        this.initialized = true;
+      if (!this.state.ready) {
         atcbBtnCount = atcbBtnCount + 1;
       }
-      if (this.identifier && this.identifier != '') {
+      if (this.identifier && this.identifier !== '') {
         this.data.identifier = this.identifier;
       } else {
-        if (this.data.identifier && this.data.identifier != '') {
+        if (this.data.identifier && this.data.identifier !== '') {
           if (!/^[\w\-_]+$/.test(this.data.identifier)) {
             this.data.identifier = '';
             if (this.debug) {
@@ -5895,10 +5912,10 @@ async function atcb_build_button(host, data) {
     throw new Error(e.message);
   }
 }
-function atcb_cleanup(host, data) {
+function atcb_cleanup(host, identifier) {
   atcb_close(host);
-  atcb_unset_global_event_listener(data.identifier);
-  const schemaEl = document.getElementById('atcb-schema-' + data.identifier);
+  atcb_unset_global_event_listener(identifier);
+  const schemaEl = document.getElementById('atcb-schema-' + identifier);
   if (schemaEl) {
     schemaEl.remove();
   }
@@ -5908,7 +5925,7 @@ function atcb_cleanup(host, data) {
     .concat(Array.from(host.querySelectorAll('.atcb-placeholder')))
     .concat(Array.from(host.querySelectorAll('.atcb-button-wrapper')))
     .forEach((el) => el.remove());
-  delete atcbStates[`${data.identifier}`];
+  delete atcbStates[`${identifier}`];
 }
 function atcb_set_light_mode(shadowRoot, data) {
   shadowRoot.host.classList.remove('atcb-dark', 'atcb-light', 'atcb-bodyScheme');

package/dist/atcb.js

@@ -974,14 +974,14 @@ function tzlib_get_timezones(jsonType = false) {
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.6.2
+ *  Version: 2.6.3
  *  Creator: Jens Kuerschner (https://jekuer.com)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)
  *  Note:    DO NOT REMOVE THE COPYRIGHT NOTICE ABOVE!
  *
  */
-const atcbVersion = '2.6.2';
+const atcbVersion = '2.6.3';
 const atcbCssTemplate = {
   if (typeof window === 'undefined') {
     return false;
@@ -5651,12 +5651,19 @@ if (atcbIsBrowser()) {
       elem.innerHTML = template;
       this.attachShadow({ mode: 'open', delegateFocus: true });
       this.shadowRoot.append(elem.content.cloneNode(true));
-      this.loaded = false;
-      this.initialized = false;
+      this.state = {
+        initializing: false,
+        ready: false,
+        updatePending: false,
+      };
       this.data = {};
       this.error = false;
     }
     async connectedCallback() {
+      if (this.state.initializing || this.state.ready) {
+        return;
+      }
+      this.state.initializing = true;
       const debugVal = this.getAttribute('debug');
       this.debug = this.hasAttribute('debug') && (!debugVal || debugVal === 'true' || debugVal === '') ? true : false;
       if ((this.hasAttribute('proKey') && this.getAttribute('proKey') !== '') || (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '')) {
@@ -5677,19 +5684,21 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
-          this.loaded = true;
+          this.state.initializing = false;
           return;
         }
       }
-      this.loaded = true;
       await this.initButton();
+      this.state.initializing = false;
+      this.state.ready = true;
+      return;
     }
     disconnectedCallback() {
-      atcb_cleanup(this.shadowRoot, this.data);
+      atcb_cleanup(this.shadowRoot, this.identifier);
       if (this.debug) {
-        console.log('Add to Calendar Button "' + this.data.identifier + '" destroyed');
+        console.log('Add to Calendar Button "' + this.identifier + '" destroyed');
       }
-      if (document.querySelectorAll('add-to-calendar-button').length == 0) {
+      if (document.querySelectorAll('add-to-calendar-button').length === 0) {
         atcbBtnCount = 0;
       }
     }
@@ -5708,14 +5717,20 @@ if (atcbIsBrowser()) {
         })
         .concat(observeAdditionally);
     }
-    async attributeChangedCallback(name, oldValue, newValue) {
-      if (!this.loaded) {
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.state.initializing || !this.state.ready) {
         return;
       }
-      if (this.debug && this.initialized) {
+      if (this.debug && this.state.ready) {
         console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
       }
-      atcb_cleanup(this.shadowRoot, this.data);
+      if (!this.updatePending) {
+        this.updatePending = true;
+        setTimeout(() => this.updateComponent(), 0);
+      }
+    }
+    async updateComponent() {
+      if (!this.updatePending) return;
       this.data = {};
       this.shadowRoot.querySelector('.atcb-initialized').remove();
       const elem = document.createElement('template');
@@ -5725,7 +5740,7 @@ if (atcbIsBrowser()) {
         this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       } else if (this.hasAttribute('prokey') && this.getAttribute('prokey') !== '') {
-        this.data = await atcb_get_pro_data(this.getAttribute('proKey'), this);
+        this.data = await atcb_get_pro_data(this.getAttribute('prokey'), this);
         if (this.data.proKey) this.proKey = this.data.proKey;
       }
       if (!this.data.name || this.data.name === '') {
@@ -5736,20 +5751,22 @@ if (atcbIsBrowser()) {
             console.error(e);
             atcb_render_debug_msg(this.shadowRoot, e);
           }
+          this.updatePending = false;
           return;
         }
       }
+      atcb_cleanup(this.shadowRoot, this.identifier);
       await this.initButton();
+      this.updatePending = false;
     }
     async initButton() {
-      if (!this.initialized) {
-        this.initialized = true;
+      if (!this.state.ready) {
         atcbBtnCount = atcbBtnCount + 1;
       }
-      if (this.identifier && this.identifier != '') {
+      if (this.identifier && this.identifier !== '') {
         this.data.identifier = this.identifier;
       } else {
-        if (this.data.identifier && this.data.identifier != '') {
+        if (this.data.identifier && this.data.identifier !== '') {
           if (!/^[\w\-_]+$/.test(this.data.identifier)) {
             this.data.identifier = '';
             if (this.debug) {
@@ -5894,10 +5911,10 @@ async function atcb_build_button(host, data) {
     throw new Error(e.message);
   }
 }
-function atcb_cleanup(host, data) {
+function atcb_cleanup(host, identifier) {
   atcb_close(host);
-  atcb_unset_global_event_listener(data.identifier);
-  const schemaEl = document.getElementById('atcb-schema-' + data.identifier);
+  atcb_unset_global_event_listener(identifier);
+  const schemaEl = document.getElementById('atcb-schema-' + identifier);
   if (schemaEl) {
     schemaEl.remove();
   }
@@ -5907,7 +5924,7 @@ function atcb_cleanup(host, data) {
     .concat(Array.from(host.querySelectorAll('.atcb-placeholder')))
     .concat(Array.from(host.querySelectorAll('.atcb-button-wrapper')))
     .forEach((el) => el.remove());
-  delete atcbStates[`${data.identifier}`];
+  delete atcbStates[`${identifier}`];
 }
 function atcb_set_light_mode(shadowRoot, data) {
   shadowRoot.host.classList.remove('atcb-dark', 'atcb-light', 'atcb-bodyScheme');