@descope/web-components-ui 1.0.320 → 1.0.321

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -3413,6 +3413,8 @@ const customMixin$7 = (superclass) =>
3413
3413
  // create external input
3414
3414
  const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
3415
3415
 
3416
+ this.handlePasswordVisibility(externalInput);
3417
+
3416
3418
  // apply original input's styles to external input
3417
3419
  setTimeout(() => {
3418
3420
  applyExternalInputStyles(origInput, externalInput);
@@ -3423,6 +3425,7 @@ const customMixin$7 = (superclass) =>
3423
3425
 
3424
3426
  // sync input stateful attributes: `type` (for visibility state change) and `readonly`
3425
3427
  syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
3428
+ syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
3426
3429
 
3427
3430
  origInput.addEventListener('focus', (e) => {
3428
3431
  e.preventDefault();
@@ -3440,6 +3443,59 @@ const customMixin$7 = (superclass) =>
3440
3443
  this.appendChild(externalInput);
3441
3444
  }
3442
3445
 
3446
+ // override vaadin's password visibility toggle.
3447
+ // we need this override in order to to resolve the external input `focus` race condition,
3448
+ // which is caused due to the focus sync between the two inputs.
3449
+ handlePasswordVisibility(externalInput) {
3450
+ // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
3451
+ const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
3452
+ this.baseElement
3453
+ .querySelector('vaadin-password-field-button')
3454
+ .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
3455
+
3456
+ // disable vaadin's `_passwordVisibleChanged` observer
3457
+ this.baseElement._passwordVisibleChanged = () => {};
3458
+
3459
+ // override vaadin's `_togglePasswordVisibility`
3460
+ this.baseElement._togglePasswordVisibility = () => {
3461
+ const currVisibility = externalInput.getAttribute('type');
3462
+ if (currVisibility === 'password') {
3463
+ this.showPasswordVisibility(externalInput);
3464
+ } else {
3465
+ this.hidePasswordVisibility(externalInput);
3466
+ }
3467
+ };
3468
+
3469
+ // on component blur, if password is revealed - hide it
3470
+ // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
3471
+ // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
3472
+ // and then focusing in the input again
3473
+ this.addEventListener('blur', () => {
3474
+ setTimeout(() => {
3475
+ const isHiddenAndFocused =
3476
+ externalInput.getAttribute('type') !== 'password' &&
3477
+ externalInput.getAttribute('focused') !== 'true';
3478
+ if (isHiddenAndFocused) {
3479
+ this.hidePasswordVisibility(externalInput);
3480
+ }
3481
+ });
3482
+ });
3483
+ }
3484
+
3485
+ hidePasswordVisibility(input) {
3486
+ // handle input element's type
3487
+ input.setAttribute('type', 'password');
3488
+ // handle vaadin's `password-visible` attribute
3489
+ this.setAttribute('password-visible', 'false');
3490
+ }
3491
+
3492
+ showPasswordVisibility(input) {
3493
+ // handle input element's type
3494
+ input.setAttribute('type', 'text');
3495
+ // handle vaadin's `password-visible` attribute
3496
+ this.setAttribute('password-visible', 'true');
3497
+ }
3498
+
3443
3499
  getAutocompleteType() {
3444
3500
  return this.getAttribute('autocomplete') || 'current-password';
3445
3501
  }