@descope/web-components-ui 1.0.194 → 1.0.196

package/dist/index.esm.js

@@ -841,6 +841,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');
     }
@@ -2330,8 +2334,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' },
       },
@@ -2735,7 +2739,7 @@ const PasscodeClass = compose(
     mappings: {
       fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
       hostWidth: { property: 'width' },
-      fontFamily: host$8,
+      fontFamily: [host$8, { ...label$7 }],
       labelTextColor: [
         { ...label$7, property: 'color' },
         { ...requiredIndicator$7, property: 'color' },
@@ -3142,6 +3146,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
@@ -3162,11 +3295,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
@@ -3184,14 +3322,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() {
@@ -3328,7 +3483,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'],
   })
@@ -4598,20 +4753,26 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
     this.innerHTML = `
     <div>
-        <descope-combo-box
-          item-label-path="data-name"
-          item-value-path="data-id"
-        >
-        ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
-        </descope-combo-box>
-        <div class="separator"></div>
-        <descope-text-field type="tel"></descope-text-field>
+      <descope-combo-box
+        item-label-path="data-name"
+        item-value-path="data-id"
+      >
+      ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
+      </descope-combo-box>
+      <div class="separator"></div>
+      <descope-text-field type="tel"></descope-text-field>
     </div>
     `;
 
     this.countryCodeInput = this.querySelector('descope-combo-box');
     this.phoneNumberInput = this.querySelector('descope-text-field');
     this.inputs = [this.countryCodeInput, this.phoneNumberInput];
+
+    // override combo box setter to display dialCode value in input
+    this.countryCodeInput.customValueTransformFn = (val) => {
+      const [, dialCode] = val.split(' ');
+      return dialCode;
+    };
   }
 
   get value() {
@@ -4669,7 +4830,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
     super.init?.();
     this.initInputs();
-    this.setComboBoxDescriptor();
   }
 
   getRestrictedCountries() {
@@ -4711,34 +4871,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
     }
   }
 
-  // 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 want to search ALL
-  // the values (so we made a field with all the values), but display ONLY the dial code, so we added
-  // this setter, which does that.
-  setComboBoxDescriptor() {
-    const comboBox = this.countryCodeInput;
-    const input = comboBox.shadowRoot.querySelector('input');
-    const valueDescriptor = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');
-    Object.defineProperties(input, {
-      value: {
-        ...valueDescriptor,
-        set(val) {
-          if (!comboBox.items?.length) {
-            return;
-          }
-
-          const [, dialCode] = val.split(' ');
-
-          if (val === this.value) {
-            return;
-          }
-
-          valueDescriptor.set.call(this, dialCode || '');
-        },
-      },
-    });
-  }
-
   initInputs() {
     // Sanitize phone input value to filter everything but digits
     this.phoneNumberInput.addEventListener('input', (e) => {
@@ -6182,14 +6314,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 [];
@@ -6219,7 +6355,7 @@ const customMixin = (superclass) =>
 
     renderItems() {
       const template = this.getItemsTemplate();
-      if (template) this.innerHTML = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
     }
 
     init() {