@descope/web-components-ui 1.0.320 → 1.0.322
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +131 -6
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +190 -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 +69 -3
- package/src/{components/descope-password/helpers.js → helpers/externalInputs.js} +5 -5
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// since on load we can only sample the color of the placeholder,
|
|
2
2
|
// we need to temporarily populate the input in order to sample the value color
|
|
3
|
-
const getValueColor = (ele, computedStyle) => {
|
|
3
|
+
export const getValueColor = (ele, computedStyle) => {
|
|
4
4
|
// eslint-disable-next-line no-param-reassign
|
|
5
5
|
ele.value = '_';
|
|
6
6
|
|
|
@@ -21,18 +21,18 @@ export const createExternalInputSlot = (slotName, targetSlotName) => {
|
|
|
21
21
|
return slotEle;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
export const createExternalInputEle = (targetSlotName, autocompleteType) => {
|
|
24
|
+
export const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
|
25
25
|
const inputEle = document.createElement('input');
|
|
26
26
|
|
|
27
27
|
inputEle.setAttribute('slot', targetSlotName);
|
|
28
|
-
inputEle.setAttribute('type',
|
|
28
|
+
inputEle.setAttribute('type', type);
|
|
29
29
|
inputEle.setAttribute('data-hidden-input', 'true');
|
|
30
30
|
inputEle.setAttribute('autocomplete', autocompleteType);
|
|
31
31
|
|
|
32
32
|
return inputEle;
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
35
|
+
export const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
|
|
36
36
|
const computedStyle = getComputedStyle(sourceInputEle);
|
|
37
37
|
const height = computedStyle.getPropertyValue('height');
|
|
38
38
|
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
|
@@ -48,7 +48,6 @@ export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
|
48
48
|
targetInputEle.style = `
|
|
49
49
|
all: unset !important;
|
|
50
50
|
position: absolute !important;
|
|
51
|
-
width: calc(100% - 3em) !important;
|
|
52
51
|
background-color: transparent !important;
|
|
53
52
|
color: ${valueColor} !important;
|
|
54
53
|
height: ${height} !important;
|
|
@@ -58,5 +57,6 @@ export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
|
58
57
|
font-family: ${fontFamily} !important;
|
|
59
58
|
letter-spacing: ${letterSpacing} !important;
|
|
60
59
|
caret-color: ${caretColor} !important;
|
|
60
|
+
${customStyle || ''}
|
|
61
61
|
`;
|
|
62
62
|
};
|