@descope/web-components-ui 1.0.350 → 1.0.351

package/dist/cjs/index.cjs.js

@@ -3550,10 +3550,20 @@ const componentName$O = getComponentName('password');
 
 const customMixin$9 = (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() {
@@ -3572,8 +3582,27 @@ const customMixin$9 = (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);
     }
   };
 
@@ -8571,6 +8600,7 @@ const customMixin$4 = (superclass) =>
           'available-policies',
           'data-password-policy-value-minlength',
           'label-type',
+          'manual-visibility-toggle',
         ],
       });
     }