@descope/web-components-ui 1.0.352 → 1.0.354

package/dist/index.esm.js

@@ -771,6 +771,7 @@ const errorAttributes = {
   patternMismatch: 'data-errormessage-pattern-mismatch',
   tooShort: 'data-errormessage-pattern-mismatch-too-short',
   tooLong: 'data-errormessage-pattern-mismatch-too-long',
+  typeMismatch: 'data-errormessage-type-mismatch',
 };
 
 const validationTargetSymbol = Symbol('validationTarget');
@@ -829,6 +830,11 @@ const inputValidationMixin = (superclass) =>
       return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
     }
 
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgTypeMismatch() {
+      return `Please match the requested type.`;
+    }
+
     getErrorMessage(flags) {
       const {
         valueMissing,
@@ -852,6 +858,10 @@ const inputValidationMixin = (superclass) =>
             this.getAttribute(errorAttributes.patternMismatch) ||
             this.defaultErrorMsgPatternMismatch
           );
+        case typeMismatch:
+          return (
+            this.getAttribute(errorAttributes.typeMismatch) || this.defaultErrorMsgTypeMismatch
+          );
         case tooShort:
           return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
         case tooLong:
@@ -7032,13 +7042,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
   }
 
   getValidity() {
-    if (!this.policyPanel.isValid) {
-      return { patternMismatch: true };
-    }
-
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
     }
+
+    if (this.value && !this.policyPanel.isValid) {
+      return { typeMismatch: true };
+    }
+
     if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
       return { patternMismatch: true };
     }
@@ -7068,10 +7079,18 @@ class NewPasswordInternal extends BaseInputClass$4 {
   renderInputs() {
     const template = `
       <div>
-        <descope-password autocomplete="new-password" data-id="password"></descope-password>
+        <descope-password
+          autocomplete="new-password"
+          manual-visibility-toggle="true"
+          data-id="password"
+        ></descope-password>
         <descope-policy-validation></descope-policy-validation>
       </div>
-      <descope-password autocomplete="new-password" data-id="confirm"></descope-password>
+      <descope-password
+        autocomplete="new-password"
+        manual-visibility-toggle="true"
+        data-id="confirm"
+      ></descope-password>
     `;
 
     this.wrapperEle.innerHTML = template;