@descope/web-components-ui 1.0.406 → 1.0.408

package/dist/cjs/index.cjs.js

@@ -1060,6 +1060,8 @@ const booleanAttributesList = [
   'opening',
   'closing',
   'has-no-options',
+  'loading',
+  'allow-custom-value',
 ];
 
 const isBooleanAttribute = (attr) => {
@@ -6531,6 +6533,23 @@ const ComboBoxMixin = (superclass) =>
       this.renderItems();
     }
 
+    set renderer(fn) {
+      // fn takes (root, comboBox, model) as arguments
+      this.baseElement.renderer = fn;
+    }
+
+    get loading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    set loading(val) {
+      if (val) {
+        this.setAttribute('loading', 'true');
+      } else {
+        this.removeAttribute('loading');
+      }
+    }
+
     get data() {
       if (this.#data) return this.#data;
 
@@ -6574,14 +6593,20 @@ const ComboBoxMixin = (superclass) =>
     }
 
     renderItems() {
-      const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
+      if (this.#data || this.getAttribute('data')) {
+        const template = this.getItemsTemplate();
+        this.innerHTML = template;
+      }
     }
 
     handleSelectedItem() {
-      const currentSelected = this.baseElement.selectedItem?.['data-id'];
+      const { selectedItem } = this.baseElement;
+      const currentSelected = selectedItem?.['data-id'];
 
-      this.baseElement.selectedItem = undefined;
+      // If the selected item is still a child, there's no need to update the value
+      if (selectedItem && Array.from(this.children).includes(selectedItem)) {
+        return;
+      }
 
       // if previously selected item ID exists in current children, set it as selected
       if (currentSelected) {
@@ -6614,7 +6639,7 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.baseElement.items?.length) {
+            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
               return;
             }
 
@@ -6634,39 +6659,27 @@ const ComboBoxMixin = (superclass) =>
     // 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
     #onChildrenChange() {
-      const baseElement = this.shadowRoot.querySelector(this.baseSelector);
       const items = Array.from(this.children);
 
       // we want the data-name attribute to be accessible as an object attribute
-      if (items.length) {
-        items.forEach((node) => {
-          Object.defineProperty(node, 'data-name', {
-            value: node.getAttribute('data-name'),
-            configurable: true,
-            writable: true,
-          });
-          Object.defineProperty(node, 'data-id', {
-            value: node.getAttribute('data-id'),
-            configurable: true,
-            writable: true,
-          });
+      items.forEach((node) => {
+        Object.defineProperty(node, 'data-name', {
+          value: node.getAttribute('data-name'),
+          configurable: true,
+          writable: true,
         });
+        Object.defineProperty(node, 'data-id', {
+          value: node.getAttribute('data-id'),
+          configurable: true,
+          writable: true,
+        });
+      });
 
-        baseElement.items = items;
-
-        setTimeout(() => {
-          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-          this.handleSelectedItem();
-        }, 0);
-      }
-
-      // use vaadin combobox custom renderer to render options as HTML
-      // and not via default renderer, which renders only the data-name's value
-      // in its own HTML template
-      baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
-        root.innerHTML = model.item.outerHTML;
-      };
+      this.baseElement.items = items;
+      setTimeout(() => {
+        // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+        this.handleSelectedItem();
+      }, 0);
     }
 
     // the default vaadin behavior is to attach the overlay to the body when opened
@@ -6681,6 +6694,16 @@ const ComboBoxMixin = (superclass) =>
       overlay._enterModalState = () => {};
     }
 
+    #overrideRenderer() {
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
     init() {
       super.init?.();
 
@@ -6695,13 +6718,11 @@ const ComboBoxMixin = (superclass) =>
       };
 
       this.setComboBoxDescriptor();
-
       this.#overrideOverlaySettings();
+      this.#overrideRenderer();
 
-      this.renderItems();
-
+      // Set up observers - order matters here since renderItems can clear innerHTML
       observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
-
       observeChildren(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
@@ -6734,16 +6755,38 @@ const ComboBoxMixin = (superclass) =>
     }
 
     setDefaultValue() {
-      this.value = this.defaultValue;
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+      }
     }
 
-    set value(val) {
-      if (val) {
-        const child = this.baseElement.items?.find((item) => item['data-id'] === val);
+    #getChildToSelect(val) {
+      return this.baseElement.items?.find((item) => item['data-id'] === val);
+    }
 
-        if (child) {
-          this.baseElement.selectedItem = child;
-        }
+    #preventSelectedItemChangeEventIfNeeded(val, selectedChild) {
+      // If the actual value didn't change, but the selected item did (the element changed),
+      // we want to stop the event propagation since it's not a real change
+      const shouldPreventItemChangeEvent =
+        val === this.value && selectedChild !== this.baseElement.selectedItem;
+      if (shouldPreventItemChangeEvent) {
+        this.baseElement.addEventListener(
+          'selected-item-changed',
+          (e) => {
+            e.stopImmediatePropagation();
+          },
+          { once: true, capture: true }
+        );
+      }
+    }
+
+    set value(val) {
+      const selectedChild = this.#getChildToSelect(val);
+      this.#preventSelectedItemChangeEventIfNeeded(val, selectedChild);
+      if (val && selectedChild) {
+        this.baseElement.selectedItem = selectedChild;
+      } else if (!selectedChild && this.allowCustomValue) {
+        this.baseElement.value = val;
       } else {
         this.baseElement.selectedItem = undefined;
       }
@@ -6873,7 +6916,10 @@ const ComboBoxClass = compose(
     name: 'overlay',
     selector: '',
     mappings: {
-      backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+      backgroundColor: [
+        { selector: 'vaadin-combo-box-scroller' },
+        { selector: 'vaadin-combo-box-overlay::part(overlay)' },
+      ],
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
       cursor: { selector: 'vaadin-combo-box-item' },
@@ -6886,6 +6932,24 @@ const ComboBoxClass = compose(
         property: 'padding-inline-start',
       },
       itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
+
+      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
+      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
+      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
+      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
+      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
+      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
+      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      loaderBorderColor: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-color',
+      },
+      loaderBorderRadius: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-radius',
+      },
+      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
+      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
     },
     forward: {
       include: false,
@@ -6933,6 +6997,10 @@ const ComboBoxClass = compose(
       align-self: center;
     }
 
+    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {
+      display: none;
+    }
+
     vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
       opacity: 0;
     }
@@ -6947,7 +7015,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', 'data'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
     componentName: componentName$F,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
@@ -7011,6 +7079,25 @@ const comboBox = {
   // Overlay direct theme:
   [vars$y.overlay.minHeight]: '400px',
   [vars$y.overlay.margin]: '0',
+
+  [vars$y.overlay.contentHeight]: '100%',
+  [vars$y.overlay.contentOpacity]: '1',
+  _loading: {
+    [vars$y.overlay.loaderTop]: '50%',
+    [vars$y.overlay.loaderLeft]: '50%',
+    [vars$y.overlay.loaderRight]: 'auto',
+    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
+    // Margin has to be half of the width/height of the loader to center it
+    [vars$y.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars$y.overlay.loaderWidth]: '30px',
+    [vars$y.overlay.loaderHeight]: '30px',
+    [vars$y.overlay.loaderBorder]: '2px solid transparent',
+    [vars$y.overlay
+      .loaderBorderColor]: `${globalRefs$m.colors.primary.highlight} ${globalRefs$m.colors.primary.highlight} ${globalRefs$m.colors.primary.main} ${globalRefs$m.colors.primary.main}`,
+    [vars$y.overlay.loaderBorderRadius]: '50%',
+    [vars$y.overlay.contentHeight]: '100px',
+    [vars$y.overlay.contentOpacity]: '0',
+  },
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
@@ -14262,7 +14349,9 @@ class RawCalendar extends BaseInputClass$1 {
       this.monthInput.value = month;
       // For the yearInput we update the base element directly to properly trigger the change event
       // since this can be a custom value
-      this.yearInput.baseElement.value = year;
+      setTimeout(() => {
+        this.yearInput.baseElement.value = year;
+      });
     }
   }
 
@@ -14401,11 +14490,10 @@ class RawCalendar extends BaseInputClass$1 {
   }
 
   onMonthNamesChange() {
-    Array.from(this.monthInput?.children || []).forEach((child, index) => {
-      const month = this.monthNames[index];
-      child.setAttribute('data-name', month);
-      // eslint-disable-next-line no-param-reassign
-      child.textContent = month;
+    setTimeout(() => {
+      if (this.monthInput) {
+        this.monthInput.innerHTML = getMonthsOptions(this.monthNames);
+      }
     });
   }
 
@@ -17311,6 +17399,11 @@ class RawRecaptcha extends BaseClass {
   }
 
   renderRecaptcha(enabled) {
+    if (this.children.length) {
+      this.updatePreview();
+      return;
+    }
+
     if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
@@ -17328,7 +17421,7 @@ class RawRecaptcha extends BaseClass {
       :host {
         display: inline-flex;
       }
-      :host > div {
+      :host > div:not(.hidden) {
         display: flex;
       }
       :host #recaptcha .grecaptcha-badge {
@@ -17343,16 +17436,40 @@ class RawRecaptcha extends BaseClass {
 			}
       :host img {
         width: 256px;
+      }
+      :host([full-width="true"]) {
+        width: 100%;
+      }
+      .hidden {
+        display: none;
       }
 		</style>
-    <div>
+    <div class="badge">
       <span id="recaptcha"></span>
       <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
     </div>
+    <slot></slot>
 	`;
 
     this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');
+    this.badge = this.shadowRoot.querySelector('.badge');
+  }
+
+  init() {
+    super.init?.();
+
+    observeChildren(this, this.updatePreview.bind(this));
+  }
+
+  updatePreview() {
+    if (this.children.length) {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = 'none';
+      this.badge.classList.add('hidden');
+    } else {
+      this.badge.classList.remove('hidden');
+    }
   }
 
   get enterprise() {