@descope/web-components-ui 1.0.350 → 1.0.351

package/dist/index.esm.js

@@ -3460,10 +3460,20 @@ const componentName$E = getComponentName('password');
 
 const customMixin$7 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['manual-visibility-toggle'];
+    }
+
+    get manualToggleVisibility() {
+      return this.getAttribute('manual-visibility-toggle') === 'true';
+    }
+
     init() {
       super.init?.();
-
       this.handleCaretOnVisibilityChange();
+      this.origSetPasswordVisible = this.baseElement._setPasswordVisible;
+      this.origSetFocused = this.baseElement._setFocused;
+      this.baseElement._setFocused = this.setFocus.bind(this);
     }
 
     get caretPosition() {
@@ -3482,8 +3492,27 @@ const customMixin$7 = (superclass) =>
       };
     }
 
-    getAutocompleteType() {
-      return this.getAttribute('autocomplete') || 'current-password';
+    // We use `manual-visibility-toggle` to to toggle the password's visibility
+    // even if the input field is focused-out. However, on focusout - Vaadin resets
+    // password visibility. Since we don't want to override Vaadin's native setFocus
+    // function (which is part of their FocusMixin).
+    // So, here we override the part of logic that runs within Vaadin's setFocus that reports
+    // the password visibility state. This logic is part of our `manual-visibility-toggle` only.
+    setFocus(focused) {
+      if (this.manualToggleVisibility) {
+        this.baseElement._setPasswordVisible = () => {};
+      }
+      this.origSetFocused.call(this.baseElement, focused);
+      this.baseElement._setPasswordVisible = this.origSetPasswordVisible.bind(this.baseElement);
+    }
+
+    resetPasswordVisibilityToggle() {
+      this.baseElement._setPasswordVisible = this.origSetPasswordVisible;
+      this.baseElement._setFocused = this.origSetFocus;
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
     }
   };
 
@@ -6802,6 +6831,7 @@ const customMixin$4 = (superclass) =>
           'available-policies',
           'data-password-policy-value-minlength',
           'label-type',
+          'manual-visibility-toggle',
         ],
       });
     }
@@ -6949,6 +6979,7 @@ const commonAttrs = [
   'draggable',
   'autocomplete',
   'label-type',
+  'manual-visibility-toggle',
 ];
 
 const inputRelatedAttrs = [].concat(
@@ -7064,6 +7095,7 @@ class NewPasswordInternal extends BaseInputClass$4 {
         'available-policies',
         'active-policies',
         'data-password-policy-value-minlength',
+        'manual-visibility-toggle',
       ],
       mapAttrs: {
         'policy-label': 'label',