@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.
Files changed (29) hide show
  1. package/dist/cjs/index.cjs.js +784 -587
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.esm.js +989 -630
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/umd/{descope-phone-field-descope-phone-field-internal-index-js.js → 7262.js} +1 -1
  7. package/dist/umd/index.js +1 -1
  8. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
  9. package/dist/umd/{descope-phone-field-index-js.js → phone-fields-descope-phone-field-index-js.js} +1 -1
  10. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -0
  11. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -0
  12. package/package.json +1 -1
  13. package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/PhoneFieldClass.js +8 -7
  14. package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/PhoneFieldInternal.js +36 -19
  15. package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/index.js +2 -2
  16. package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/index.js +2 -2
  17. package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +173 -0
  18. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +147 -0
  19. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js +5 -0
  20. package/src/components/phone-fields/descope-phone-input-box-field/index.js +9 -0
  21. package/src/components/phone-fields/helpers.js +5 -0
  22. package/src/index.cjs.js +2 -1
  23. package/src/index.d.ts +2 -1
  24. package/src/index.js +2 -1
  25. package/src/theme/components/index.js +2 -0
  26. package/src/theme/components/phoneField.js +1 -1
  27. package/src/theme/components/phoneInputBoxField.js +30 -0
  28. /package/src/components/{descope-phone-field → phone-fields}/CountryCodes.js +0 -0
  29. /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,5 @@
1
+ import '../../../descope-text-field';
2
+
3
+ import PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';
4
+
5
+ customElements.define(componentName, PhoneFieldInternalInputBox);
@@ -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 };
@@ -0,0 +1,5 @@
1
+ import CountryCodes from './CountryCodes';
2
+
3
+ export const getCountryByCodeId = (countryCode) => {
4
+ return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5
+ };
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 };