@descope/web-components-ui 3.20.2 → 3.20.4

package/dist/index.esm.js

@@ -9007,25 +9007,80 @@ const DividerClass = compose(
 
 customElements.define(componentName$1i, DividerClass);
 
+// Kept in its own module (with no imports) so it can be unit tested without
+// pulling in the whole component / vaadin dependency chain.
+
+const asciiPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
+
+const unicodePattern =
+  "^[\\p{L}\\p{M}\\p{N}._%+'\\-]+@[\\p{L}\\p{M}\\p{N}.\\-]+\\.[\\p{L}\\p{M}][\\p{L}\\p{M}\\p{N}\\-]+$";
+
 const componentName$1h = getComponentName('email-field');
 
-const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
+const defaultInputMode = 'email';
 
 const customMixin$e = (superclass) =>
   class EmailFieldMixinClass extends superclass {
+    // On by default - `accept-unicode="false"` restores the pre-unicode field:
+    // native `type="email"` validation and the ASCII pattern.
+    //
+    // Read once, in `init`. Changing the attribute afterwards has no effect; it
+    // is static configuration, which is how every consumer sets it.
+    get acceptsUnicode() {
+      return this.getAttribute('accept-unicode') !== 'false';
+    }
+
     init() {
       super.init?.();
 
       // we need to set the pattern on the base element because vaadin-email-field is overriding it
-      this.baseElement.setAttribute('pattern', defaultPattern);
+      this.baseElement.setAttribute('pattern', asciiPattern);
 
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
       }
 
       this.createExternalInput();
+
+      [this.inputElement, this.externalInput].filter(Boolean).forEach((input) => {
+        input.addEventListener('change', this.stripSurroundingWhitespace);
+      });
+
+      if (this.acceptsUnicode) {
+        this.enableUnicode();
+      }
+    }
+
+    enableUnicode() {
+      this.baseElement.setAttribute('pattern', unicodePattern);
+
+      // native `type="email"` validation is ASCII only and sets typeMismatch
+      // before `pattern` is consulted, so `text` is what lets the pattern decide.
+      // Through vaadin's `_setType` because `type` is a readOnly property bound
+      // to the inner input - assigning `input.type` is re-applied over.
+      this.baseElement._setType('text');
+
+      if (this.externalInput) {
+        this.externalInput.type = 'text';
+      }
+
+      // `type="text"` loses the email keyboard on mobile
+      if (!this.getAttribute('inputmode')) {
+        this.setAttribute('inputmode', defaultInputMode);
+      }
+
+      this.externalInput?.setAttribute('inputmode', defaultInputMode);
     }
+
+    stripSurroundingWhitespace = (e) => {
+      const trimmed = e.target.value.trim();
+      if (trimmed === e.target.value) return;
+      this.value = trimmed;
+
+      // validity is cached and was computed against the untrimmed value
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    };
   };
 
 const EmailFieldClass = compose(