@descope/web-components-ui 1.0.135 → 1.0.148

Sign up to get free protection for your applications and to get access to all the features.
Files changed (175) hide show
  1. package/package.json +77 -56
  2. package/src/baseClasses/createBaseClass.js +18 -16
  3. package/src/baseClasses/createBaseInputClass.js +14 -8
  4. package/src/baseClasses/createCssVarImageClass.js +27 -23
  5. package/src/components/boolean-fields/booleanFieldMixin.js +18 -29
  6. package/src/components/boolean-fields/commonStyles.js +1 -1
  7. package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js +46 -51
  8. package/src/components/boolean-fields/descope-boolean-field-internal/index.js +1 -1
  9. package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +80 -85
  10. package/src/components/boolean-fields/descope-checkbox/index.js +2 -2
  11. package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +88 -95
  12. package/src/components/boolean-fields/descope-switch-toggle/index.js +2 -2
  13. package/src/components/descope-button/ButtonClass.js +57 -47
  14. package/src/components/descope-button/clickableMixin.js +10 -0
  15. package/src/components/descope-combo-box/ComboBoxClass.js +156 -160
  16. package/src/components/descope-container/ContainerClass.js +32 -42
  17. package/src/components/descope-date-picker/index.js +9 -14
  18. package/src/components/descope-divider/DividerClass.js +52 -62
  19. package/src/components/descope-email-field/EmailFieldClass.js +25 -20
  20. package/src/components/descope-image/ImageClass.js +21 -24
  21. package/src/components/descope-link/LinkClass.js +31 -35
  22. package/src/components/descope-loader-linear/LoaderLinearClass.js +31 -36
  23. package/src/components/descope-loader-radial/LoaderRadialClass.js +23 -30
  24. package/src/components/descope-logo/LogoClass.js +5 -1
  25. package/src/components/descope-new-password/NewPasswordClass.js +63 -81
  26. package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +157 -162
  27. package/src/components/descope-new-password/descope-new-password-internal/componentName.js +1 -1
  28. package/src/components/descope-new-password/descope-new-password-internal/index.js +3 -3
  29. package/src/components/descope-new-password/index.js +3 -3
  30. package/src/components/descope-number-field/NumberFieldClass.js +25 -20
  31. package/src/components/descope-passcode/PasscodeClass.js +95 -95
  32. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +151 -157
  33. package/src/components/descope-passcode/descope-passcode-internal/helpers.js +7 -8
  34. package/src/components/descope-passcode/descope-passcode-internal/index.js +2 -2
  35. package/src/components/descope-passcode/index.js +2 -2
  36. package/src/components/descope-password/PasswordClass.js +75 -83
  37. package/src/components/descope-password/passwordDraggableMixin.js +28 -27
  38. package/src/components/descope-phone-field/CountryCodes.js +1210 -1210
  39. package/src/components/descope-phone-field/PhoneFieldClass.js +139 -141
  40. package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +157 -173
  41. package/src/components/descope-phone-field/helpers.js +3 -3
  42. package/src/components/descope-text/TextClass.js +25 -29
  43. package/src/components/descope-text-area/TextAreaClass.js +68 -67
  44. package/src/components/descope-text-field/TextFieldClass.js +42 -37
  45. package/src/components/descope-text-field/textFieldMappings.js +40 -55
  46. package/src/components/descope-totp-image/TotpImageClass.js +5 -1
  47. package/src/components/descope-upload-file/UploadFileClass.js +202 -0
  48. package/src/components/descope-upload-file/helpers.js +11 -0
  49. package/src/components/descope-upload-file/index.js +6 -0
  50. package/src/constants.js +3 -3
  51. package/src/helpers/componentHelpers.js +68 -74
  52. package/src/helpers/index.js +17 -16
  53. package/src/helpers/mixinsHelpers.js +21 -10
  54. package/src/helpers/themeHelpers/colorsHelpers.js +18 -18
  55. package/src/helpers/themeHelpers/componentsThemeManager.js +7 -6
  56. package/src/helpers/themeHelpers/index.js +114 -124
  57. package/src/helpers/themeHelpers/resetHelpers.js +16 -16
  58. package/src/index.cjs.js +3 -3
  59. package/src/index.d.ts +22 -21
  60. package/src/index.js +5 -4
  61. package/src/index.umd.js +14 -13
  62. package/src/mixins/changeMixin.js +18 -17
  63. package/src/mixins/componentNameValidationMixin.js +19 -19
  64. package/src/mixins/createProxy.js +33 -33
  65. package/src/mixins/createStyleMixin/helpers.js +54 -64
  66. package/src/mixins/createStyleMixin/index.js +155 -141
  67. package/src/mixins/draggableMixin.js +61 -61
  68. package/src/mixins/hoverableMixin.js +11 -13
  69. package/src/mixins/index.js +6 -6
  70. package/src/mixins/inputEventsDispatchingMixin.js +61 -60
  71. package/src/mixins/inputValidationMixin.js +153 -148
  72. package/src/mixins/lifecycleEventsMixin.js +17 -15
  73. package/src/mixins/normalizeBooleanAttributesMixin.js +31 -23
  74. package/src/mixins/portalMixin.js +58 -52
  75. package/src/mixins/proxyInputMixin.js +138 -132
  76. package/src/theme/components/button.js +86 -81
  77. package/src/theme/components/checkbox.js +26 -28
  78. package/src/theme/components/comboBox.js +32 -31
  79. package/src/theme/components/container.js +99 -89
  80. package/src/theme/components/divider.js +30 -31
  81. package/src/theme/components/emailField.js +20 -19
  82. package/src/theme/components/image.js +3 -3
  83. package/src/theme/components/index.js +33 -25
  84. package/src/theme/components/inputWrapper.js +28 -25
  85. package/src/theme/components/link.js +29 -36
  86. package/src/theme/components/loader/index.js +3 -3
  87. package/src/theme/components/loader/loaderLinear.js +34 -34
  88. package/src/theme/components/loader/loaderRadial.js +40 -34
  89. package/src/theme/components/logo.js +4 -4
  90. package/src/theme/components/newPassword.js +14 -13
  91. package/src/theme/components/numberField.js +20 -19
  92. package/src/theme/components/passcode.js +20 -22
  93. package/src/theme/components/password.js +22 -21
  94. package/src/theme/components/phoneField.js +23 -23
  95. package/src/theme/components/switchToggle.js +47 -46
  96. package/src/theme/components/text.js +72 -72
  97. package/src/theme/components/textArea.js +27 -25
  98. package/src/theme/components/textField.js +23 -22
  99. package/src/theme/components/totpImage.js +4 -4
  100. package/src/theme/components/uploadFile.js +60 -0
  101. package/src/theme/globals.js +123 -124
  102. package/src/theme/index.js +1 -1
  103. package/dist/cjs/index.cjs.js +0 -5924
  104. package/dist/cjs/index.cjs.js.map +0 -1
  105. package/dist/cjs/package.json +0 -1
  106. package/dist/index.d.ts +0 -51
  107. package/dist/index.esm.js +0 -6606
  108. package/dist/index.esm.js.map +0 -1
  109. package/dist/umd/1018.js +0 -577
  110. package/dist/umd/1018.js.LICENSE.txt +0 -23
  111. package/dist/umd/2481.js +0 -1
  112. package/dist/umd/3208.js +0 -2
  113. package/dist/umd/3208.js.LICENSE.txt +0 -5
  114. package/dist/umd/3585.js +0 -1
  115. package/dist/umd/3878.js +0 -1
  116. package/dist/umd/4201.js +0 -1
  117. package/dist/umd/422.js +0 -2
  118. package/dist/umd/422.js.LICENSE.txt +0 -5
  119. package/dist/umd/4447.js +0 -1
  120. package/dist/umd/4513.js +0 -1
  121. package/dist/umd/4803.js +0 -1
  122. package/dist/umd/541.js +0 -744
  123. package/dist/umd/541.js.LICENSE.txt +0 -21
  124. package/dist/umd/5767.js +0 -2
  125. package/dist/umd/5767.js.LICENSE.txt +0 -15
  126. package/dist/umd/5806.js +0 -109
  127. package/dist/umd/5806.js.LICENSE.txt +0 -5
  128. package/dist/umd/7056.js +0 -48
  129. package/dist/umd/7056.js.LICENSE.txt +0 -5
  130. package/dist/umd/7101.js +0 -148
  131. package/dist/umd/7101.js.LICENSE.txt +0 -11
  132. package/dist/umd/729.js +0 -1
  133. package/dist/umd/7824.js +0 -229
  134. package/dist/umd/7824.js.LICENSE.txt +0 -27
  135. package/dist/umd/7840.js +0 -356
  136. package/dist/umd/7840.js.LICENSE.txt +0 -61
  137. package/dist/umd/8725.js +0 -37
  138. package/dist/umd/8725.js.LICENSE.txt +0 -11
  139. package/dist/umd/9211.js +0 -312
  140. package/dist/umd/9211.js.LICENSE.txt +0 -5
  141. package/dist/umd/9241.js +0 -1
  142. package/dist/umd/9314.js +0 -283
  143. package/dist/umd/9314.js.LICENSE.txt +0 -27
  144. package/dist/umd/9437.js +0 -19
  145. package/dist/umd/9437.js.LICENSE.txt +0 -5
  146. package/dist/umd/9515.js +0 -202
  147. package/dist/umd/9515.js.LICENSE.txt +0 -11
  148. package/dist/umd/9789.js +0 -1
  149. package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +0 -1
  150. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +0 -1
  151. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +0 -1
  152. package/dist/umd/descope-button-index-js.js +0 -1
  153. package/dist/umd/descope-combo-box-index-js.js +0 -1
  154. package/dist/umd/descope-container-index-js.js +0 -1
  155. package/dist/umd/descope-date-picker-index-js.js +0 -1
  156. package/dist/umd/descope-divider-index-js.js +0 -1
  157. package/dist/umd/descope-email-field-index-js.js +0 -1
  158. package/dist/umd/descope-image-index-js.js +0 -1
  159. package/dist/umd/descope-link-index-js.js +0 -1
  160. package/dist/umd/descope-loader-linear-index-js.js +0 -1
  161. package/dist/umd/descope-loader-radial-index-js.js +0 -1
  162. package/dist/umd/descope-logo-index-js.js +0 -1
  163. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +0 -1
  164. package/dist/umd/descope-new-password-index-js.js +0 -1
  165. package/dist/umd/descope-number-field-index-js.js +0 -1
  166. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +0 -1
  167. package/dist/umd/descope-passcode-index-js.js +0 -1
  168. package/dist/umd/descope-password-index-js.js +0 -1
  169. package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +0 -1
  170. package/dist/umd/descope-phone-field-index-js.js +0 -1
  171. package/dist/umd/descope-text-area-index-js.js +0 -1
  172. package/dist/umd/descope-text-field-index-js.js +0 -1
  173. package/dist/umd/descope-text-index-js.js +0 -1
  174. package/dist/umd/descope-totp-image-index-js.js +0 -1
  175. package/dist/umd/index.js +0 -1
@@ -1,121 +1,121 @@
1
1
  import {
2
- createStyleMixin,
3
- draggableMixin,
4
- createProxy,
5
- proxyInputMixin,
6
- componentNameValidationMixin
2
+ createStyleMixin,
3
+ draggableMixin,
4
+ createProxy,
5
+ proxyInputMixin,
6
+ componentNameValidationMixin,
7
7
  } from '../../mixins';
8
8
  import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
9
- import { TextFieldClass } from '../descope-text-field/TextFieldClass'
9
+ import { TextFieldClass } from '../descope-text-field/TextFieldClass';
10
10
  import { compose } from '../../helpers';
11
11
  import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
12
- import { resetInputCursor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
12
+ import {
13
+ resetInputCursor,
14
+ resetInputFieldDefaultWidth,
15
+ } from '../../helpers/themeHelpers/resetHelpers';
13
16
 
14
17
  export const componentName = getComponentName('passcode');
15
18
 
16
- const observedAttributes = [
17
- 'digits'
18
- ];
19
+ const observedAttributes = ['digits'];
19
20
 
20
21
  const customMixin = (superclass) =>
21
- class PasscodeMixinClass extends superclass {
22
- static get observedAttributes() {
23
- return observedAttributes.concat(superclass.observedAttributes || []);
24
- }
25
-
26
- constructor() {
27
- super();
28
- }
29
-
30
- get digits() {
31
- return Number.parseInt(this.getAttribute('digits')) || 6;
32
- }
33
-
34
- init() {
35
- super.init?.();
36
- const template = document.createElement('template');
37
-
38
- template.innerHTML = `
39
- <${descopeInternalComponentName}
40
- bordered="true"
41
- name="code"
22
+ class PasscodeMixinClass extends superclass {
23
+ static get observedAttributes() {
24
+ return observedAttributes.concat(superclass.observedAttributes || []);
25
+ }
26
+
27
+ get digits() {
28
+ return Number.parseInt(this.getAttribute('digits'), 10) || 6;
29
+ }
30
+
31
+ init() {
32
+ super.init?.();
33
+ const template = document.createElement('template');
34
+
35
+ template.innerHTML = `
36
+ <${descopeInternalComponentName}
37
+ bordered="true"
38
+ name="code"
42
39
  tabindex="-1"
43
40
  slot="input"
44
41
  ></${descopeInternalComponentName}>
45
42
  `;
46
43
 
47
- this.baseElement.appendChild(template.content.cloneNode(true));
44
+ this.baseElement.appendChild(template.content.cloneNode(true));
48
45
 
49
- this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
46
+ this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
50
47
 
51
- forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] })
52
- }
48
+ forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
49
+ }
53
50
 
54
- attributeChangedCallback(attrName, oldValue, newValue) {
55
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
51
+ attributeChangedCallback(attrName, oldValue, newValue) {
52
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
56
53
 
57
- if (attrName === 'digits') {
58
- this.style.setProperty('--passcode-digits-count', newValue);
59
- }
60
- }
61
- };
54
+ if (attrName === 'digits') {
55
+ this.style.setProperty('--passcode-digits-count', newValue);
56
+ }
57
+ }
58
+ };
62
59
 
63
60
  const {
64
- host,
65
- digitField,
66
- label,
67
- requiredIndicator,
68
- internalWrapper,
69
- focusedDigitField
61
+ host,
62
+ digitField,
63
+ label,
64
+ requiredIndicator,
65
+ internalWrapper,
66
+ focusedDigitField,
67
+ errorMessage,
70
68
  } = {
71
- host: { selector: () => ':host' },
72
- focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
73
- digitField: { selector: () => TextFieldClass.componentName },
74
- label: { selector: '::part(label)' },
75
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
76
- internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
77
- }
69
+ host: { selector: () => ':host' },
70
+ focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
71
+ digitField: { selector: () => TextFieldClass.componentName },
72
+ label: { selector: '::part(label)' },
73
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
74
+ internalWrapper: { selector: 'descope-passcode-internal .wrapper' },
75
+ errorMessage: { selector: '::part(error-message)' },
76
+ };
78
77
 
79
- const textVars = TextFieldClass.cssVarList
78
+ const textVars = TextFieldClass.cssVarList;
80
79
 
81
80
  export const PasscodeClass = compose(
82
- createStyleMixin({
83
- mappings: {
84
- fontSize: [{ ...digitField, property: textVars.fontSize }, host],
85
- hostWidth: { property: 'width' },
86
- fontFamily: host,
87
- labelTextColor: [
88
- { ...label, property: 'color' },
89
- { ...requiredIndicator, property: 'color' },
90
- ],
91
- labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
92
- digitValueTextColor: {
93
- selector: TextFieldClass.componentName,
94
- property: textVars.inputValueTextColor
95
- },
96
- digitSize: [
97
- { ...digitField, property: 'height' },
98
- { ...digitField, property: 'width' }
99
- ],
100
- digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
101
- digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
102
- digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
103
- digitSpacing: { ...internalWrapper, property: 'gap' },
104
- digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
105
- digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
106
-
107
- focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor }
108
- },
109
- }),
110
- draggableMixin,
111
- proxyInputMixin,
112
- componentNameValidationMixin,
113
- customMixin
81
+ createStyleMixin({
82
+ mappings: {
83
+ fontSize: [{ ...digitField, property: textVars.fontSize }, host],
84
+ hostWidth: { property: 'width' },
85
+ fontFamily: host,
86
+ labelTextColor: [
87
+ { ...label, property: 'color' },
88
+ { ...requiredIndicator, property: 'color' },
89
+ ],
90
+ labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
91
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
92
+ digitValueTextColor: {
93
+ selector: TextFieldClass.componentName,
94
+ property: textVars.inputValueTextColor,
95
+ },
96
+ digitSize: [
97
+ { ...digitField, property: 'height' },
98
+ { ...digitField, property: 'width' },
99
+ ],
100
+ digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
101
+ digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
102
+ digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
103
+ digitSpacing: { ...internalWrapper, property: 'gap' },
104
+ digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
105
+ digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
106
+
107
+ focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor },
108
+ },
109
+ }),
110
+ draggableMixin,
111
+ proxyInputMixin,
112
+ componentNameValidationMixin,
113
+ customMixin
114
114
  )(
115
- createProxy({
116
- slots: [],
117
- wrappedEleName: 'vaadin-text-field',
118
- style: () => `
115
+ createProxy({
116
+ slots: [],
117
+ wrappedEleName: 'vaadin-text-field',
118
+ style: () => `
119
119
  :host {
120
120
  display: inline-flex;
121
121
  max-width: 100%;
@@ -180,9 +180,9 @@ export const PasscodeClass = compose(
180
180
 
181
181
  ${resetInputCursor('vaadin-text-field')}
182
182
  `,
183
- excludeAttrsSync: ['tabindex'],
184
- componentName
185
- })
183
+ excludeAttrsSync: ['tabindex'],
184
+ componentName,
185
+ })
186
186
  );
187
187
 
188
188
  export default PasscodeClass;
@@ -1,36 +1,29 @@
1
+ /* eslint-disable no-param-reassign */
1
2
  import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
2
3
  import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
3
4
  import { getSanitizedCharacters, focusElement } from './helpers';
4
5
 
5
6
  export const componentName = getComponentName('passcode-internal');
6
7
 
7
- const observedAttributes = [
8
- 'digits'
9
- ]
8
+ const observedAttributes = ['digits'];
10
9
 
11
- const forwardAttributes = [
12
- 'disabled',
13
- 'bordered',
14
- 'size',
15
- 'invalid',
16
- 'readonly'
17
- ]
10
+ const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
18
11
 
19
- const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' })
12
+ const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
20
13
 
21
14
  class PasscodeInternal extends BaseInputClass {
22
- static get observedAttributes() {
23
- return observedAttributes.concat(BaseInputClass.observedAttributes || []);
24
- }
15
+ static get observedAttributes() {
16
+ return observedAttributes.concat(BaseInputClass.observedAttributes || []);
17
+ }
25
18
 
26
- static get componentName() {
27
- return componentName;
28
- }
19
+ static get componentName() {
20
+ return componentName;
21
+ }
29
22
 
30
- constructor() {
31
- super();
23
+ constructor() {
24
+ super();
32
25
 
33
- this.innerHTML = `
26
+ this.innerHTML = `
34
27
  <div class="wrapper"></div>
35
28
  <style>
36
29
  .wrapper {
@@ -41,150 +34,151 @@ class PasscodeInternal extends BaseInputClass {
41
34
  </style>
42
35
  `;
43
36
 
44
- this.wrapperEle = this.querySelector('div');
45
- }
37
+ this.wrapperEle = this.querySelector('div');
38
+ }
46
39
 
47
- renderInputs() {
48
- const inputs = [...Array(this.digits).keys()].map((idx) => `
40
+ renderInputs() {
41
+ const inputs = [...Array(this.digits).keys()].map(
42
+ (idx) => `
49
43
  <descope-text-field
50
44
  data-id=${idx}
51
45
  type="tel"
52
46
  autocomplete="one-time-code"
53
47
  inputMode="numeric"
54
48
  ></descope-text-field>
55
- `)
56
-
57
- this.wrapperEle.innerHTML = inputs.join('');
58
-
59
- this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
60
-
61
- this.initInputs()
62
- }
63
-
64
- get digits() {
65
- return Number.parseInt(this.getAttribute('digits')) || 6
66
- }
67
-
68
- get value() {
69
- return this.inputs?.map(({ value }) => value).join('') || ''
70
- }
71
-
72
- set value(val) {
73
- if (val === this.value) return;
74
-
75
- const charArr = getSanitizedCharacters(val);
76
-
77
- if (charArr.length) {
78
- this.fillDigits(charArr, this.inputs[0]);
79
- }
80
- }
81
-
82
- get pattern() {
83
- return `^$|^\\d{${this.digits},}$`
84
- }
85
-
86
- getValidity() {
87
- if (this.isRequired && !this.value) {
88
- return { valueMissing: true };
89
- }
90
- else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
91
- return { patternMismatch: true };
92
- }
93
- else {
94
- return {}
95
- }
96
- };
97
-
98
- init() {
99
- // we are adding listeners before calling to super because it's stopping the events
100
- this.addEventListener('focus', (e) => {
101
- // we want to ignore focus events we are dispatching
102
- if (e.isTrusted)
103
- this.inputs[0].focus()
104
- })
105
-
106
- super.init?.();
107
-
108
- this.renderInputs();
109
- }
110
-
111
- getInputIdx(inputEle) {
112
- return Number.parseInt(inputEle.getAttribute('data-id'), 10)
113
- }
114
-
115
- getNextInput(currInput) {
116
- const currentIdx = this.getInputIdx(currInput)
117
- const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
118
- return this.inputs[newIdx]
119
- }
120
-
121
- getPrevInput(currInput) {
122
- const currentIdx = this.getInputIdx(currInput)
123
- const newIdx = Math.max(currentIdx - 1, 0)
124
- return this.inputs[newIdx]
125
- }
126
-
127
- fillDigits(charArr, currentInput) {
128
- for (let i = 0; i < charArr.length; i += 1) {
129
- currentInput.value = charArr[i] ?? '';
130
-
131
- const nextInput = this.getNextInput(currentInput);
132
-
133
- if (nextInput === currentInput) break;
134
- currentInput = nextInput;
135
- }
136
-
137
- focusElement(currentInput);
138
- };
139
-
140
- initInputs() {
141
- this.inputs.forEach((input) => {
142
- // sanitize the input
143
- input.addEventListener('input', (e) => {
144
- const charArr = getSanitizedCharacters(input.value);
145
-
146
- if (!charArr.length) {
147
- // if we got an invalid value we want to clear the input
148
- input.value = '';
149
- }
150
- else this.fillDigits(charArr, input);
151
- })
152
-
153
- // we want backspace to focus on the previous digit
154
- input.onkeydown = ({ key }) => {
155
- // when user deletes a digit, we want to focus the previous digit
156
- if (key === 'Backspace') {
157
- // if the cursor is at 0, we want to move it to 1, so the value will be deleted
158
- if (!input.selectionStart) {
159
- input.setSelectionRange(1, 1);
160
- }
161
- setTimeout(() => {
162
- focusElement(this.getPrevInput(input));
163
- });
164
- } else if (key.length === 1) { // we want only characters and not command keys
165
- input.value = ''; // we are clearing the previous value so we can override it with the new value
166
- }
167
- };
168
-
169
- forwardAttrs(this, input, { includeAttrs: forwardAttributes })
170
- })
171
-
172
- this.handleFocusEventsDispatching(this.inputs);
173
- this.handleInputEventDispatching();
174
- }
175
-
176
- attributeChangedCallback(attrName, oldValue, newValue) {
177
- super.attributeChangedCallback?.(attrName, oldValue, newValue)
178
-
179
- // sync attributes to inputs
180
- if (oldValue !== newValue) {
181
- if (observedAttributes.includes(attrName)) {
182
- if (attrName === 'digits') {
183
- this.renderInputs();
184
- }
185
- }
186
- }
187
- }
49
+ `
50
+ );
51
+
52
+ this.wrapperEle.innerHTML = inputs.join('');
53
+
54
+ this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
55
+
56
+ this.initInputs();
57
+ }
58
+
59
+ get digits() {
60
+ return Number.parseInt(this.getAttribute('digits'), 10) || 6;
61
+ }
62
+
63
+ get value() {
64
+ return this.inputs?.map(({ value }) => value).join('') || '';
65
+ }
66
+
67
+ set value(val) {
68
+ if (val === this.value) return;
69
+
70
+ const charArr = getSanitizedCharacters(val);
71
+
72
+ if (charArr.length) {
73
+ this.fillDigits(charArr, this.inputs[0]);
74
+ }
75
+ }
76
+
77
+ get pattern() {
78
+ return `^$|^\\d{${this.digits},}$`;
79
+ }
80
+
81
+ getValidity() {
82
+ if (this.isRequired && !this.value) {
83
+ return { valueMissing: true };
84
+ }
85
+ if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
86
+ return { patternMismatch: true };
87
+ }
88
+
89
+ return {};
90
+ }
91
+
92
+ init() {
93
+ // we are adding listeners before calling to super because it's stopping the events
94
+ this.addEventListener('focus', (e) => {
95
+ // we want to ignore focus events we are dispatching
96
+ if (e.isTrusted) this.inputs[0].focus();
97
+ });
98
+
99
+ super.init?.();
100
+
101
+ this.renderInputs();
102
+ }
103
+
104
+ // eslint-disable-next-line class-methods-use-this
105
+ getInputIdx(inputEle) {
106
+ return Number.parseInt(inputEle.getAttribute('data-id'), 10);
107
+ }
108
+
109
+ getNextInput(currInput) {
110
+ const currentIdx = this.getInputIdx(currInput);
111
+ const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);
112
+ return this.inputs[newIdx];
113
+ }
114
+
115
+ getPrevInput(currInput) {
116
+ const currentIdx = this.getInputIdx(currInput);
117
+ const newIdx = Math.max(currentIdx - 1, 0);
118
+ return this.inputs[newIdx];
119
+ }
120
+
121
+ fillDigits(charArr, currentInput) {
122
+ for (let i = 0; i < charArr.length; i += 1) {
123
+ currentInput.value = charArr[i] ?? '';
124
+
125
+ const nextInput = this.getNextInput(currentInput);
126
+
127
+ if (nextInput === currentInput) break;
128
+ currentInput = nextInput;
129
+ }
130
+
131
+ focusElement(currentInput);
132
+ }
133
+
134
+ initInputs() {
135
+ this.inputs.forEach((input) => {
136
+ // sanitize the input
137
+ input.addEventListener('input', (_) => {
138
+ const charArr = getSanitizedCharacters(input.value);
139
+
140
+ if (!charArr.length) {
141
+ // if we got an invalid value we want to clear the input
142
+ input.value = '';
143
+ } else this.fillDigits(charArr, input);
144
+ });
145
+
146
+ // we want backspace to focus on the previous digit
147
+ input.onkeydown = ({ key }) => {
148
+ // when user deletes a digit, we want to focus the previous digit
149
+ if (key === 'Backspace') {
150
+ // if the cursor is at 0, we want to move it to 1, so the value will be deleted
151
+ if (!input.selectionStart) {
152
+ input.setSelectionRange(1, 1);
153
+ }
154
+ setTimeout(() => {
155
+ focusElement(this.getPrevInput(input));
156
+ });
157
+ } else if (key.length === 1) {
158
+ // we want only characters and not command keys
159
+ input.value = ''; // we are clearing the previous value so we can override it with the new value
160
+ }
161
+ };
162
+
163
+ forwardAttrs(this, input, { includeAttrs: forwardAttributes });
164
+ });
165
+
166
+ this.handleFocusEventsDispatching(this.inputs);
167
+ this.handleInputEventDispatching();
168
+ }
169
+
170
+ attributeChangedCallback(attrName, oldValue, newValue) {
171
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
172
+
173
+ // sync attributes to inputs
174
+ if (oldValue !== newValue) {
175
+ if (observedAttributes.includes(attrName)) {
176
+ if (attrName === 'digits') {
177
+ this.renderInputs();
178
+ }
179
+ }
180
+ }
181
+ }
188
182
  }
189
183
 
190
184
  export default PasscodeInternal;
@@ -1,14 +1,13 @@
1
-
2
1
  export const focusElement = (ele) => {
3
- ele?.focus();
4
- ele?.setSelectionRange(1, 1);
2
+ ele?.focus();
3
+ ele?.setSelectionRange(1, 1);
5
4
  };
6
5
 
7
6
  export const getSanitizedCharacters = (str) => {
8
- const pin = str.replace(/\s/g, ''); // sanitize string
7
+ const pin = str.replace(/\s/g, ''); // sanitize string
9
8
 
10
- // accept only numbers
11
- if (!pin.match(/^\d+$/)) return [];
9
+ // accept only numbers
10
+ if (!pin.match(/^\d+$/)) return [];
12
11
 
13
- return [...pin]; // creating array of chars
14
- };
12
+ return [...pin]; // creating array of chars
13
+ };
@@ -1,3 +1,3 @@
1
- import PasscodeInternal, { componentName } from "./PasscodeInternal"
1
+ import PasscodeInternal, { componentName } from './PasscodeInternal';
2
2
 
3
- customElements.define(componentName, PasscodeInternal)
3
+ customElements.define(componentName, PasscodeInternal);
@@ -1,6 +1,6 @@
1
1
  import { componentName, PasscodeClass } from './PasscodeClass';
2
- import '../descope-text-field'
3
- import './descope-passcode-internal'
2
+ import '../descope-text-field';
3
+ import './descope-passcode-internal';
4
4
 
5
5
  customElements.define(componentName, PasscodeClass);
6
6