@descope/web-components-ui 1.0.196 → 1.0.198

package/dist/index.esm.js

@@ -4704,10 +4704,10 @@ var CountryCodes = [
   },
 ].sort((a, b) => (a.name < b.name ? -1 : 1));
 
-// We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
+// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)
 // This reduces our bundle size, and we use it as a static remote resource.
 const getCountryFlag = (code) =>
-  `https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
+  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
 
 const comboBoxItem = ({ code, dialCode, name: country }) => `
 	<div
@@ -6208,9 +6208,13 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     this.getSelectedNode()?.removeAttribute('selected');
   }
 
-  onNodeClick(e) {
-    if (!this.isReadonly) {
-      this.setSelected(e.target);
+  onClick(e) {
+    if (!this.isReadonly && e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode()) {
+        this.removeSelected();
+      } else {
+        this.setSelected(e.target);
+      }
       this.#dispatchChange();
     }
   }
@@ -6223,7 +6227,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 
   get value() {
-    return this.getSelectedNode()?.value;
+    return this.getSelectedNode()?.value || '';
   }
 
   set value(value) {
@@ -6283,12 +6287,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
 
     observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
 
-    observeChildren(this, ({ addedNodes }) => {
-      addedNodes.forEach((node) => {
-        node.addEventListener('click', this.onNodeClick.bind(this));
-        node.setAttribute('size', this.size);
-      });
-    });
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
   }
 }
 
@@ -6311,6 +6310,10 @@ const customMixin = (superclass) =>
       this.renderItems();
     }
 
+    get size() {
+      return this.inputElement?.size;
+    }
+
     get data() {
       if (this.#data) return this.#data;
 
@@ -6381,6 +6384,13 @@ const customMixin = (superclass) =>
       this.renderItems();
 
       observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      // we want new items to get the size
+      observeChildren(this, ({ addedNodes }) => {
+        addedNodes.forEach((node) => {
+          node.setAttribute('size', this.size);
+        });
+      });
     }
   };