@descope/web-components-ui 1.0.321 → 1.0.322
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 +75 -6
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +134 -65
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +4 -4
- 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-email-field/EmailFieldClass.js +65 -1
- package/src/components/descope-password/PasswordClass.js +13 -3
- package/src/{components/descope-password/helpers.js → helpers/externalInputs.js} +5 -5
package/dist/cjs/index.cjs.js
CHANGED
@@ -3412,18 +3412,18 @@ const createExternalInputSlot = (slotName, targetSlotName) => {
|
|
3412
3412
|
return slotEle;
|
3413
3413
|
};
|
3414
3414
|
|
3415
|
-
const createExternalInputEle = (targetSlotName, autocompleteType) => {
|
3415
|
+
const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
3416
3416
|
const inputEle = document.createElement('input');
|
3417
3417
|
|
3418
3418
|
inputEle.setAttribute('slot', targetSlotName);
|
3419
|
-
inputEle.setAttribute('type',
|
3419
|
+
inputEle.setAttribute('type', type);
|
3420
3420
|
inputEle.setAttribute('data-hidden-input', 'true');
|
3421
3421
|
inputEle.setAttribute('autocomplete', autocompleteType);
|
3422
3422
|
|
3423
3423
|
return inputEle;
|
3424
3424
|
};
|
3425
3425
|
|
3426
|
-
const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
3426
|
+
const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
|
3427
3427
|
const computedStyle = getComputedStyle(sourceInputEle);
|
3428
3428
|
const height = computedStyle.getPropertyValue('height');
|
3429
3429
|
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
@@ -3439,7 +3439,6 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
3439
3439
|
targetInputEle.style = `
|
3440
3440
|
all: unset !important;
|
3441
3441
|
position: absolute !important;
|
3442
|
-
width: calc(100% - 3em) !important;
|
3443
3442
|
background-color: transparent !important;
|
3444
3443
|
color: ${valueColor} !important;
|
3445
3444
|
height: ${height} !important;
|
@@ -3449,6 +3448,7 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
3449
3448
|
font-family: ${fontFamily} !important;
|
3450
3449
|
letter-spacing: ${letterSpacing} !important;
|
3451
3450
|
caret-color: ${caretColor} !important;
|
3451
|
+
${customStyle || ''}
|
3452
3452
|
`;
|
3453
3453
|
};
|
3454
3454
|
|
@@ -3473,13 +3473,23 @@ const customMixin$9 = (superclass) =>
|
|
3473
3473
|
this.baseElement.appendChild(externalInputSlot);
|
3474
3474
|
|
3475
3475
|
// create external input
|
3476
|
-
const externalInput = createExternalInputEle(
|
3476
|
+
const externalInput = createExternalInputEle(
|
3477
|
+
'external-input',
|
3478
|
+
'password',
|
3479
|
+
this.getAutocompleteType()
|
3480
|
+
);
|
3477
3481
|
|
3478
3482
|
this.handlePasswordVisibility(externalInput);
|
3479
3483
|
|
3480
3484
|
// apply original input's styles to external input
|
3481
3485
|
setTimeout(() => {
|
3482
|
-
applyExternalInputStyles(
|
3486
|
+
applyExternalInputStyles(
|
3487
|
+
origInput,
|
3488
|
+
externalInput,
|
3489
|
+
`
|
3490
|
+
width: calc(100% - 3em) !important;
|
3491
|
+
`
|
3492
|
+
);
|
3483
3493
|
});
|
3484
3494
|
|
3485
3495
|
// set external input events
|
@@ -3816,9 +3826,68 @@ const customMixin$8 = (superclass) =>
|
|
3816
3826
|
class EmailFieldMixinClass extends superclass {
|
3817
3827
|
init() {
|
3818
3828
|
super.init?.();
|
3829
|
+
|
3819
3830
|
this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
|
3831
|
+
|
3832
|
+
this.handleExternalInput();
|
3833
|
+
}
|
3834
|
+
|
3835
|
+
handleExternalInput() {
|
3836
|
+
// reset vaadin's checkValidity
|
3837
|
+
this.baseElement.checkValidity = () => {};
|
3838
|
+
|
3839
|
+
// set safety attribute `external-input`
|
3840
|
+
this.setAttribute('external-input', 'true');
|
3841
|
+
|
3842
|
+
// use original input element as reference
|
3843
|
+
const origInput = this.baseElement.querySelector('input');
|
3844
|
+
|
3845
|
+
// create external slot
|
3846
|
+
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
3847
|
+
// append external slot to base element
|
3848
|
+
this.baseElement.appendChild(externalInputSlot);
|
3849
|
+
|
3850
|
+
const externalInput = createExternalInputEle(
|
3851
|
+
'external-input',
|
3852
|
+
'text',
|
3853
|
+
this.getAutocompleteType()
|
3854
|
+
);
|
3855
|
+
|
3856
|
+
// apply original input's styles to external input
|
3857
|
+
setTimeout(() => {
|
3858
|
+
applyExternalInputStyles(origInput, externalInput);
|
3859
|
+
});
|
3860
|
+
|
3861
|
+
// set external input events
|
3862
|
+
this.handleExternalInputEvents(externalInput);
|
3863
|
+
|
3864
|
+
syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
|
3865
|
+
|
3866
|
+
// append external input to component's DOM
|
3867
|
+
this.appendChild(externalInput);
|
3868
|
+
}
|
3869
|
+
|
3870
|
+
getAutocompleteType() {
|
3871
|
+
return this.getAttribute('autocomplete') || 'username';
|
3872
|
+
}
|
3873
|
+
|
3874
|
+
handleExternalInputEvents(inputEle) {
|
3875
|
+
// sync value of insible input back to original input
|
3876
|
+
inputEle.addEventListener('input', (e) => {
|
3877
|
+
this.value = e.target.value;
|
3878
|
+
});
|
3879
|
+
|
3880
|
+
// sync `focused` attribute on host when focusing on external input
|
3881
|
+
inputEle.addEventListener('focus', () => {
|
3882
|
+
this.setAttribute('focused', 'true');
|
3883
|
+
});
|
3884
|
+
|
3885
|
+
inputEle.addEventListener('blur', () => {
|
3886
|
+
this.removeAttribute('focused');
|
3887
|
+
});
|
3820
3888
|
}
|
3821
3889
|
};
|
3890
|
+
|
3822
3891
|
const EmailFieldClass = compose(
|
3823
3892
|
createStyleMixin({
|
3824
3893
|
mappings: textFieldMappings,
|