@descope/web-components-ui 1.0.357 → 1.0.359

package/dist/cjs/index.cjs.js

@@ -3,6 +3,7 @@
 var merge = require('lodash.merge');
 var Color = require('color');
 var MarkdownIt = require('markdown-it');
+require('lodash.debounce');
 var hljs = require('highlight.js');
 
 const DESCOPE_PREFIX = 'descope';
@@ -2972,6 +2973,7 @@ const {
   requiredIndicator: requiredIndicator$b,
   inputField: inputField$6,
   input,
+  inputMask,
   helperText: helperText$a,
   errorMessage: errorMessage$c,
   disabledPlaceholder,
@@ -2988,6 +2990,7 @@ const {
   disabledPlaceholder: { selector: '> input:disabled::placeholder' },
   inputField: { selector: '::part(input-field)' },
   input: { selector: 'input' },
+  inputMask: { selector: '::part(input-field)::before' },
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -3013,7 +3016,10 @@ var textFieldMappings = {
   hostMinWidth: { ...host$m, property: 'min-width' },
   hostDirection: { ...host$m, property: 'direction' },
 
-  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+  inputBackgroundColor: [
+    { ...inputField$6, property: 'background-color' },
+    { ...inputMask, property: 'background-color' },
+  ],
 
   errorMessageTextColor: { ...errorMessage$c, property: 'color' },
   helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
@@ -3909,18 +3915,21 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
 
 const componentName$M = getComponentName('email-field');
 
+const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
+const defaultAutocomplete = 'username';
+
 const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
 
-      this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
-
-      this.setAttribute('autocomplete', this.getAutocompleteType());
-    }
+      if (!this.getAttribute('pattern')) {
+        this.setAttribute('pattern', defaultPattern);
+      }
 
-    getAutocompleteType() {
-      return this.getAttribute('autocomplete') || 'username';
+      if (!this.getAttribute('autocomplete')) {
+        this.setAttribute('autocomplete', defaultAutocomplete);
+      }
     }
   };
 
@@ -3952,7 +3961,7 @@ const EmailFieldClass = compose(
 
       vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
       }
@@ -5782,10 +5791,15 @@ const PasscodeClass = compose(
 				-webkit-mask-image: none;
 			}
 
+      /* safari */
+			vaadin-text-field::part(input-field)::after {
+        opacity: 0;
+      }
+
 			vaadin-text-field {
 				margin: 0;
 				padding: 0;
-				width: 100%
+				width: 100%;
 			}
 
 			vaadin-text-field::before {