@descope/web-components-ui 1.0.194 → 1.0.196

package/dist/cjs/index.cjs.js

@@ -1969,6 +1969,10 @@ const inputValidationMixin = (superclass) =>
       return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
     }
 
+    get isDisabled() {
+      return this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
+    }
+
     get pattern() {
       return this.getAttribute('pattern');
     }
@@ -3971,8 +3975,8 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   const CssVarImageClass = compose(
     createStyleMixin({
       mappings: {
-        height: { selector: () => ':host' },
-        width: { selector: () => ':host' },
+        height: { selector: () => ':host > div' },
+        width: { selector: () => ':host > div' },
         [varName]: { property: 'content' },
         [fallbackVarName]: { property: 'content' },
       },
@@ -4484,7 +4488,7 @@ const PasscodeClass = compose(
     mappings: {
       fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
       hostWidth: { property: 'width' },
-      fontFamily: host$7,
+      fontFamily: [host$7, { ...label$5 }],
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...requiredIndicator$5, property: 'color' },
@@ -4831,6 +4835,135 @@ const componentName$c = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ displayName, value, label }) => {
+      return `<span data-name="${label}" data-id="${value}">${displayName}</span>`;
+    };
+
+    #data;
+
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          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 = template;
+    }
+
+    handleSelectedItem() {
+      if (this.isDisabled || this.isReadOnly) {
+        this.baseElement.selectedItem = undefined;
+        return;
+      }
+
+      const currentSelected = this.selectedItem?.['data-id'];
+
+      this.baseElement.selectedItem = undefined;
+
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected) {
+        this.value = currentSelected;
+      }
+
+      // otherwise, if default value is specified, set default value as selected item
+      if (!this.value) {
+        this.setDefaultValue();
+      }
+
+      // otherwise, set first item as selected item
+      if (!this.value) {
+        this.value = this.items?.[0]?.['data-id'];
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
+    }
+
+    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+    // field that it searches the value, and the finaly display value of the input.
+    // We provide a custom transform function to override that behavior.
+    setComboBoxDescriptor() {
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
+
+      const comboBox = this;
+
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            if (!comboBox.items?.length) {
+              return;
+            }
+
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
+
+            if (transformedValue === this.value) {
+              return;
+            }
+
+            valueDescriptor.set.call(this, transformedValue);
+          },
+        },
+      });
+    }
+
     // vaadin api is to set props on their combo box node,
     // in order to avoid it, we are passing the children of this component
     // to the items & renderer props, so it will be used as the combo box items
@@ -4851,11 +4984,16 @@ const ComboBoxMixin = (superclass) =>
 
         baseElement.items = items;
 
-        baseElement.renderer = (root, combo, model) => {
-          // eslint-disable-next-line no-param-reassign
-          root.innerHTML = model.item.outerHTML;
-        };
+        setTimeout(() => {
+          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+          this.handleSelectedItem();
+        }, 0);
       }
+
+      baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
     }
 
     // the default vaadin behavior is to attach the overlay to the body when opened
@@ -4873,14 +5011,31 @@ const ComboBoxMixin = (superclass) =>
     init() {
       super.init?.();
 
+      this.setComboBoxDescriptor();
+
       this.#overrideOverlaySettings();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
       observeChildren(this, this.#onChildrenChange.bind(this));
+
+      this.setDefaultValue();
+    }
+
+    setDefaultValue() {
+      this.value = this.defaultValue;
     }
 
     set value(val) {
-      this.baseElement.selectedItem = this.baseElement.items.find(
-        (item) => item['data-id'] === val
-      );
+      const child = this.baseElement.items.find((item) => item['data-id'] === val);
+
+      if (!child) {
+        return;
+      }
+
+      this.baseElement.selectedItem = child;
     }
 
     get value() {
@@ -5017,7 +5172,7 @@ const ComboBoxClass = compose(
     // with the same name. Including it will cause Vaadin to calculate NaN size,
     // and reset items to an empty array, and opening the list box with no items
     // to display.
-    excludeAttrsSync: ['tabindex', 'size'],
+    excludeAttrsSync: ['tabindex', 'size', 'data'],
     componentName: componentName$c,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
@@ -7522,14 +7677,18 @@ const customMixin = (superclass) =>
     get data() {
       if (this.#data) return this.#data;
 
-      try {
-        const data = JSON.parse(this.getAttribute('data'));
-        if (this.isValidDataType(data)) {
-          return data;
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          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);
         }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('could not parse data string from attribute "data" - ', e.message);
       }
 
       return [];
@@ -7559,7 +7718,7 @@ const customMixin = (superclass) =>
 
     renderItems() {
       const template = this.getItemsTemplate();
-      if (template) this.innerHTML = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
     }
 
     init() {