@descope/web-components-ui 1.0.313 → 1.0.315
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +206 -29
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +228 -63
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4978.js +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-new-password/NewPasswordClass.js +27 -1
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +18 -30
- package/src/components/descope-password/PasswordClass.js +92 -15
- package/src/components/descope-password/helpers.js +62 -0
- package/src/components/descope-password/passwordDraggableMixin.js +16 -11
- package/src/mixins/inputValidationMixin.js +12 -1
@@ -0,0 +1,62 @@
|
|
1
|
+
// since on load we can only sample the color of the placeholder,
|
2
|
+
// we need to temporarily populate the input in order to sample the value color
|
3
|
+
const getValueColor = (ele, computedStyle) => {
|
4
|
+
// eslint-disable-next-line no-param-reassign
|
5
|
+
ele.value = '_';
|
6
|
+
|
7
|
+
const valueColor = computedStyle.getPropertyValue('color');
|
8
|
+
|
9
|
+
// eslint-disable-next-line no-param-reassign
|
10
|
+
ele.value = '';
|
11
|
+
|
12
|
+
return valueColor;
|
13
|
+
};
|
14
|
+
|
15
|
+
export const createExternalInputSlot = (slotName, targetSlotName) => {
|
16
|
+
const slotEle = document.createElement('slot');
|
17
|
+
|
18
|
+
slotEle.setAttribute('name', slotName);
|
19
|
+
slotEle.setAttribute('slot', targetSlotName);
|
20
|
+
|
21
|
+
return slotEle;
|
22
|
+
};
|
23
|
+
|
24
|
+
export const createExternalInputEle = (targetSlotName, autocompleteType) => {
|
25
|
+
const inputEle = document.createElement('input');
|
26
|
+
|
27
|
+
inputEle.setAttribute('slot', targetSlotName);
|
28
|
+
inputEle.setAttribute('type', 'password');
|
29
|
+
inputEle.setAttribute('data-hidden-input', 'true');
|
30
|
+
inputEle.setAttribute('autocomplete', autocompleteType);
|
31
|
+
|
32
|
+
return inputEle;
|
33
|
+
};
|
34
|
+
|
35
|
+
export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
36
|
+
const computedStyle = getComputedStyle(sourceInputEle);
|
37
|
+
const height = computedStyle.getPropertyValue('height');
|
38
|
+
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
39
|
+
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
40
|
+
const fontSize = computedStyle.getPropertyValue('font-size');
|
41
|
+
const fontFamily = computedStyle.getPropertyValue('font-family');
|
42
|
+
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
43
|
+
const caretColor = computedStyle.getPropertyValue('caret-color');
|
44
|
+
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
45
|
+
|
46
|
+
// set external input style (and lock it with `all: unset` and `!important` all around)
|
47
|
+
// eslint-disable-next-line no-param-reassign
|
48
|
+
targetInputEle.style = `
|
49
|
+
all: unset !important;
|
50
|
+
position: absolute !important;
|
51
|
+
width: calc(100% - 3em) !important;
|
52
|
+
background-color: transparent !important;
|
53
|
+
color: ${valueColor} !important;
|
54
|
+
height: ${height} !important;
|
55
|
+
left: ${paddingLeft} !important;
|
56
|
+
right: ${paddingRight} !important;
|
57
|
+
font-size: ${fontSize} !important;
|
58
|
+
font-family: ${fontFamily} !important;
|
59
|
+
letter-spacing: ${letterSpacing} !important;
|
60
|
+
caret-color: ${caretColor} !important;
|
61
|
+
`;
|
62
|
+
};
|
@@ -8,27 +8,32 @@ const passwordDraggableMixin = (superclass) =>
|
|
8
8
|
// there is an issue in Chrome that input field with type password cannot be D&D
|
9
9
|
// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
|
10
10
|
// and return the original type when done
|
11
|
-
|
11
|
+
super.init?.();
|
12
|
+
|
13
|
+
const ele = this.querySelector('input');
|
14
|
+
|
15
|
+
ele?.addEventListener('mousedown', (e) => {
|
12
16
|
if (this.isDraggable && this.isReadOnly) {
|
13
|
-
|
14
|
-
const prevType = inputEle.getAttribute('type');
|
17
|
+
ele.setAttribute('inert', 'true');
|
15
18
|
|
19
|
+
const inputEle = e.target;
|
20
|
+
const prevType = inputEle.getAttribute('type');
|
16
21
|
inputEle.setAttribute('type', 'text');
|
17
|
-
setTimeout(() =>
|
22
|
+
setTimeout(() => {
|
23
|
+
inputEle.focus();
|
24
|
+
});
|
18
25
|
|
19
26
|
const onComplete = (_) => {
|
20
27
|
inputEle.setAttribute('type', prevType);
|
21
|
-
|
22
|
-
|
23
|
-
|
28
|
+
ele.removeAttribute('inert');
|
29
|
+
this.removeEventListener('mouseup', onComplete);
|
30
|
+
this.removeEventListener('dragend', onComplete);
|
24
31
|
};
|
25
32
|
|
26
|
-
|
27
|
-
|
33
|
+
this.addEventListener('dragend', onComplete, { once: true });
|
34
|
+
this.addEventListener('mouseup', onComplete, { once: true });
|
28
35
|
}
|
29
36
|
});
|
30
|
-
|
31
|
-
super.init?.();
|
32
37
|
}
|
33
38
|
};
|
34
39
|
|
@@ -8,8 +8,13 @@ const errorAttributes = {
|
|
8
8
|
tooShort: 'data-errormessage-pattern-mismatch-too-short',
|
9
9
|
tooLong: 'data-errormessage-pattern-mismatch-too-long',
|
10
10
|
};
|
11
|
+
|
12
|
+
const validationTargetSymbol = Symbol('validationTarget');
|
13
|
+
|
11
14
|
export const inputValidationMixin = (superclass) =>
|
12
15
|
class InputValidationMixinClass extends superclass {
|
16
|
+
#validationTarget = validationTargetSymbol;
|
17
|
+
|
13
18
|
static get observedAttributes() {
|
14
19
|
return [...(superclass.observedAttributes || []), ...observedAttributes];
|
15
20
|
}
|
@@ -126,7 +131,13 @@ export const inputValidationMixin = (superclass) =>
|
|
126
131
|
}
|
127
132
|
|
128
133
|
get validationTarget() {
|
129
|
-
return this
|
134
|
+
return this.#validationTarget === validationTargetSymbol
|
135
|
+
? this.inputElement
|
136
|
+
: this.#validationTarget;
|
137
|
+
}
|
138
|
+
|
139
|
+
set validationTarget(val) {
|
140
|
+
this.#validationTarget = val;
|
130
141
|
}
|
131
142
|
|
132
143
|
setCustomValidity(errorMessage) {
|