@descope/web-components-ui 1.0.188 → 1.0.190

package/dist/cjs/index.cjs.js

@@ -4941,6 +4941,7 @@ const ComboBoxClass = compose(
       overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
       overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
       overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
     },
   }),
   draggableMixin,
@@ -4954,6 +4955,7 @@ const ComboBoxClass = compose(
       cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
       fontSize: { selector: 'vaadin-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
     },
     forward: {
       include: false,
@@ -5042,6 +5044,7 @@ const comboBox = {
   [vars$8.overlayFontSize]: refs.fontSize,
   [vars$8.overlayFontFamily]: refs.fontFamily,
   [vars$8.overlayCursor]: 'pointer',
+  [vars$8.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
   [vars$8.overlay.minHeight]: '400px',
@@ -7478,6 +7481,64 @@ const componentName$1 = 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');
@@ -7497,6 +7558,10 @@ const customMixin = (superclass) =>
       this.inputElement = this.shadowRoot.querySelector(componentName$2);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
     }
   };