@descope/web-components-ui 1.0.173 → 1.0.175
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 +784 -587
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +989 -630
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/{descope-phone-field-descope-phone-field-internal-index-js.js → 7262.js} +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
- package/dist/umd/{descope-phone-field-index-js.js → phone-fields-descope-phone-field-index-js.js} +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -0
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/PhoneFieldClass.js +8 -7
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/PhoneFieldInternal.js +36 -19
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/index.js +2 -2
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/index.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +173 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +147 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js +5 -0
- package/src/components/phone-fields/descope-phone-input-box-field/index.js +9 -0
- package/src/components/phone-fields/helpers.js +5 -0
- package/src/index.cjs.js +2 -1
- package/src/index.d.ts +2 -1
- package/src/index.js +2 -1
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/phoneField.js +1 -1
- package/src/theme/components/phoneInputBoxField.js +30 -0
- /package/src/components/{descope-phone-field → phone-fields}/CountryCodes.js +0 -0
- /package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/helpers.js +0 -0
@@ -0,0 +1,147 @@
|
|
1
|
+
import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
|
2
|
+
import { getComponentName } from '../../../../helpers/componentHelpers';
|
3
|
+
import { getCountryByCodeId } from '../../helpers';
|
4
|
+
|
5
|
+
export const componentName = getComponentName('phone-field-internal-input-box');
|
6
|
+
|
7
|
+
const observedAttributes = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'placeholder'];
|
8
|
+
|
9
|
+
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
|
10
|
+
|
11
|
+
class PhoneFieldInternal extends BaseInputClass {
|
12
|
+
static get observedAttributes() {
|
13
|
+
return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);
|
14
|
+
}
|
15
|
+
|
16
|
+
constructor() {
|
17
|
+
super();
|
18
|
+
|
19
|
+
this.innerHTML = `
|
20
|
+
<div>
|
21
|
+
<descope-text-field tabindex="1"></descope-text-field>
|
22
|
+
</div>
|
23
|
+
`;
|
24
|
+
|
25
|
+
this.phoneNumberInput = this.querySelector('descope-text-field');
|
26
|
+
}
|
27
|
+
|
28
|
+
get defaultCountryCode() {
|
29
|
+
return getCountryByCodeId(this.getAttribute('default-code'));
|
30
|
+
}
|
31
|
+
|
32
|
+
get hasDefaultCode() {
|
33
|
+
return !!this.getAttribute('default-code');
|
34
|
+
}
|
35
|
+
|
36
|
+
get value() {
|
37
|
+
if (!this.phoneNumberValue) {
|
38
|
+
return '';
|
39
|
+
}
|
40
|
+
|
41
|
+
if (this.hasDefaultCode) {
|
42
|
+
// we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
|
43
|
+
// e.g.:
|
44
|
+
// +972-12345 => +972-12345
|
45
|
+
// 972-12345 => +972-12345
|
46
|
+
// 12345 => +972-12345
|
47
|
+
//
|
48
|
+
// we also want to handle any extra dash if added in the start of the phone number
|
49
|
+
// e.g.:
|
50
|
+
// +972--12345 => +972-12345
|
51
|
+
const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
|
52
|
+
return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
|
53
|
+
}
|
54
|
+
|
55
|
+
return this.phoneNumberInput.value;
|
56
|
+
}
|
57
|
+
|
58
|
+
set value(val) {
|
59
|
+
this.phoneNumberInput.value = val;
|
60
|
+
}
|
61
|
+
|
62
|
+
get phoneNumberValue() {
|
63
|
+
return this.phoneNumberInput.value;
|
64
|
+
}
|
65
|
+
|
66
|
+
get minLength() {
|
67
|
+
return parseInt(this.getAttribute('minlength'), 10) || 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
get maxLength() {
|
71
|
+
return parseInt(this.getAttribute('maxlength'), 10) || 50;
|
72
|
+
}
|
73
|
+
|
74
|
+
getValidity() {
|
75
|
+
const validPhonePattern = /^\+\d{1,4}-(?:\d-?){1,15}$/;
|
76
|
+
const stripValue = this.value.replace(/\D/g, '');
|
77
|
+
|
78
|
+
if (this.isRequired && !this.value) {
|
79
|
+
return { valueMissing: true };
|
80
|
+
}
|
81
|
+
|
82
|
+
if (stripValue.length < this.minLength) {
|
83
|
+
return { tooShort: true };
|
84
|
+
}
|
85
|
+
|
86
|
+
if (stripValue.length > this.maxLength) {
|
87
|
+
return { tooLong: true };
|
88
|
+
}
|
89
|
+
|
90
|
+
if (!validPhonePattern.test(this.value)) {
|
91
|
+
return { patternMismatch: true };
|
92
|
+
}
|
93
|
+
|
94
|
+
return {};
|
95
|
+
}
|
96
|
+
|
97
|
+
init() {
|
98
|
+
this.addEventListener('focus', (e) => {
|
99
|
+
// we want to ignore focus events we are dispatching
|
100
|
+
if (e.isTrusted) this.phoneNumberInput.focus();
|
101
|
+
});
|
102
|
+
|
103
|
+
super.init?.();
|
104
|
+
this.initInputs();
|
105
|
+
}
|
106
|
+
|
107
|
+
getCountryByDialCode(countryDialCode) {
|
108
|
+
return this.countryCodeInput.items?.find(
|
109
|
+
(c) => c.getAttribute('data-dial-code') === countryDialCode
|
110
|
+
);
|
111
|
+
}
|
112
|
+
|
113
|
+
initInputs() {
|
114
|
+
// Sanitize phone input value to filter everything but digits
|
115
|
+
this.phoneNumberInput.addEventListener('input', (e) => {
|
116
|
+
if (e.target.value.length === 1 && e.target.value === '-') {
|
117
|
+
e.target.value = '';
|
118
|
+
}
|
119
|
+
|
120
|
+
e.target.value = e.target.value
|
121
|
+
.replace(/(?!^)\+/g, '')
|
122
|
+
.replace('--', '-')
|
123
|
+
.replace('+-', '+');
|
124
|
+
|
125
|
+
const telDigitsRegExp = /^[+\d-]+$/;
|
126
|
+
const sanitizedInput = e.target.value
|
127
|
+
.split('')
|
128
|
+
.filter((char) => telDigitsRegExp.test(char))
|
129
|
+
.join('');
|
130
|
+
|
131
|
+
e.target.value = sanitizedInput;
|
132
|
+
});
|
133
|
+
|
134
|
+
this.handleFocusEventsDispatching([this.phoneNumberInput]);
|
135
|
+
this.handleInputEventDispatching();
|
136
|
+
}
|
137
|
+
|
138
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
139
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
140
|
+
|
141
|
+
if (oldValue !== newValue && observedAttributes.includes(attrName)) {
|
142
|
+
this.phoneNumberInput.setAttribute(attrName, newValue);
|
143
|
+
}
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
export default PhoneFieldInternal;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import './descope-phone-input-box-internal';
|
2
|
+
import '../../descope-combo-box';
|
3
|
+
import '../../descope-text-field';
|
4
|
+
|
5
|
+
import { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';
|
6
|
+
|
7
|
+
customElements.define(componentName, PhoneFieldInputBoxClass);
|
8
|
+
|
9
|
+
export { PhoneFieldInputBoxClass };
|
package/src/index.cjs.js
CHANGED
@@ -22,6 +22,7 @@ export { TextClass } from './components/descope-text/TextClass';
|
|
22
22
|
export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
|
23
23
|
export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
|
24
24
|
export { ImageClass } from './components/descope-image/ImageClass';
|
25
|
-
export { PhoneFieldClass } from './components/descope-phone-field/PhoneFieldClass';
|
25
|
+
export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/PhoneFieldClass';
|
26
|
+
export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
|
26
27
|
export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
|
27
28
|
export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
|
package/src/index.d.ts
CHANGED
@@ -27,7 +27,8 @@ export { TextClass } from './components/descope-text';
|
|
27
27
|
export { TextAreaClass } from './components/descope-text-area';
|
28
28
|
export { TextFieldClass } from './components/descope-text-field';
|
29
29
|
export { ImageClass } from './components/descope-image';
|
30
|
-
export { PhoneFieldClass } from './components/descope-phone-field';
|
30
|
+
export { PhoneFieldClass } from './components/phone-fields/descope-phone-field';
|
31
|
+
export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field';
|
31
32
|
export { NewPasswordClass } from './components/descope-new-password';
|
32
33
|
export { RecaptchaClass } from './components/descope-recaptcha';
|
33
34
|
export { UploadFileClass } from './components/descope-upload-file';
|
package/src/index.js
CHANGED
@@ -17,7 +17,8 @@ export * from './components/descope-text';
|
|
17
17
|
export * from './components/descope-text-area';
|
18
18
|
export * from './components/descope-text-field';
|
19
19
|
export * from './components/descope-image';
|
20
|
-
export * from './components/descope-phone-field';
|
20
|
+
export * from './components/phone-fields/descope-phone-field';
|
21
|
+
export * from './components/phone-fields/descope-phone-input-box-field';
|
21
22
|
export * from './components/descope-new-password';
|
22
23
|
export * from './components/descope-recaptcha';
|
23
24
|
export * from './components/descope-upload-file';
|
@@ -17,6 +17,7 @@ import { loaderRadial, loaderLinear } from './loader';
|
|
17
17
|
import * as comboBox from './comboBox';
|
18
18
|
import * as image from './image';
|
19
19
|
import * as phoneField from './phoneField';
|
20
|
+
import * as phoneInputBoxField from './phoneInputBoxField';
|
20
21
|
import * as newPassword from './newPassword';
|
21
22
|
import * as inputWrapper from './inputWrapper';
|
22
23
|
import * as uploadFile from './uploadFile';
|
@@ -42,6 +43,7 @@ const components = {
|
|
42
43
|
comboBox,
|
43
44
|
image,
|
44
45
|
phoneField,
|
46
|
+
phoneInputBoxField,
|
45
47
|
newPassword,
|
46
48
|
inputWrapper,
|
47
49
|
uploadFile,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { PhoneFieldClass } from '../../components/descope-phone-field/PhoneFieldClass';
|
1
|
+
import { PhoneFieldClass } from '../../components/phone-fields/descope-phone-field/PhoneFieldClass';
|
2
2
|
import { refs } from './inputWrapper';
|
3
3
|
|
4
4
|
const vars = PhoneFieldClass.cssVarList;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { PhoneFieldInputBoxClass } from '../../components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
|
2
|
+
import { refs } from './inputWrapper';
|
3
|
+
|
4
|
+
const vars = PhoneFieldInputBoxClass.cssVarList;
|
5
|
+
|
6
|
+
const phoneInputBoxField = {
|
7
|
+
[vars.hostWidth]: '16em',
|
8
|
+
[vars.hostMinWidth]: refs.minWidth,
|
9
|
+
[vars.fontSize]: refs.fontSize,
|
10
|
+
[vars.fontFamily]: refs.fontFamily,
|
11
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
12
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
13
|
+
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
14
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
15
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
16
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
17
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
18
|
+
[vars.inputBorderColor]: refs.borderColor,
|
19
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
20
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
21
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
22
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
23
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
24
|
+
_fullWidth: {
|
25
|
+
[vars.hostWidth]: refs.width,
|
26
|
+
},
|
27
|
+
};
|
28
|
+
|
29
|
+
export default phoneInputBoxField;
|
30
|
+
export { vars };
|
File without changes
|
File without changes
|