@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/cjs/index.cjs.js +56 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +56 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-password/PasswordClass.js +56 -0
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
|
}
|