@descope/web-components-ui 1.0.188 → 1.0.189

package/dist/index.esm.js

@@ -6945,6 +6945,64 @@ const componentName$2 = getComponentName('button-selection-group');
 
 const customMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ value, label }) =>
+      `<descope-button-selection-group-item value="${value}">${label}</descope-button-selection-group-item>`;
+
+    #data;
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      try {
+        const data = JSON.parse(this.getAttribute('data'));
+        if (this.isValidDataType(data)) {
+          return data;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('could not parse data string from attribute "data" - ', e.message);
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = this.getItemsTemplate();
+    }
+
     init() {
       super.init?.();
       const template = document.createElement('template');
@@ -6964,6 +7022,10 @@ const customMixin = (superclass) =>
       this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
     }
   };