@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,62 +1,62 @@
1
1
  export const draggableMixin = (superclass) =>
2
- class DraggableMixinClass extends superclass {
3
- #styleEle = null;
4
-
5
- static get observedAttributes() {
6
- const superAttrs = superclass.observedAttributes || [];
7
- return [...superAttrs, 'draggable'];
8
- }
9
-
10
- constructor() {
11
- super();
12
-
13
- this.#styleEle = document.createElement('style');
14
- this.#styleEle.innerText = `* { cursor: inherit!important }`;
15
- }
16
-
17
- #handleDraggableStyle(isDraggable) {
18
- if (isDraggable) {
19
- this.shadowRoot.appendChild(this.#styleEle);
20
- } else {
21
- this.#styleEle.remove();
22
- }
23
- }
24
-
25
- get isDraggable() {
26
- return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
27
- }
28
-
29
- init() {
30
- // because we are delegating the focus from the outer component,
31
- // the D&D is not working well in the page editor
32
- // in order to solve it we are making the inner component focusable on mouse down
33
- // and removing it on complete
34
- this.addEventListener('mousedown', (e) => {
35
- if (this.isDraggable) {
36
- const prevTabIndex = this.baseElement.getAttribute('tabindex')
37
- this.baseElement.setAttribute('tabindex', '-1');
38
-
39
- const onComplete = () => {
40
- prevTabIndex ?
41
- this.baseElement.setAttribute('tabindex', prevTabIndex) :
42
- this.baseElement.removeAttribute('tabindex');
43
-
44
- e.target.removeEventListener('mouseup', onComplete)
45
- e.target.removeEventListener('dragend', onComplete)
46
- }
47
-
48
- e.target.addEventListener('mouseup', onComplete, { once: true })
49
- e.target.addEventListener('dragend', onComplete, { once: true })
50
- }
51
- })
52
-
53
- super.init?.();
54
- }
55
-
56
- attributeChangedCallback(attrName, oldValue, newValue) {
57
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
58
- if (attrName === 'draggable') {
59
- this.#handleDraggableStyle(newValue === 'true');
60
- }
61
- }
62
- };
2
+ class DraggableMixinClass extends superclass {
3
+ #styleEle = null;
4
+
5
+ static get observedAttributes() {
6
+ const superAttrs = superclass.observedAttributes || [];
7
+ return [...superAttrs, 'draggable'];
8
+ }
9
+
10
+ constructor() {
11
+ super();
12
+
13
+ this.#styleEle = document.createElement('style');
14
+ this.#styleEle.innerText = `* { cursor: inherit!important }`;
15
+ }
16
+
17
+ #handleDraggableStyle(isDraggable) {
18
+ if (isDraggable) {
19
+ this.shadowRoot.appendChild(this.#styleEle);
20
+ } else {
21
+ this.#styleEle.remove();
22
+ }
23
+ }
24
+
25
+ get isDraggable() {
26
+ return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false';
27
+ }
28
+
29
+ init() {
30
+ // because we are delegating the focus from the outer component,
31
+ // the D&D is not working well in the page editor
32
+ // in order to solve it we are making the inner component focusable on mouse down
33
+ // and removing it on complete
34
+ this.addEventListener('mousedown', (e) => {
35
+ if (this.isDraggable) {
36
+ const prevTabIndex = this.baseElement.getAttribute('tabindex');
37
+ this.baseElement.setAttribute('tabindex', '-1');
38
+
39
+ const onComplete = () => {
40
+ prevTabIndex
41
+ ? this.baseElement.setAttribute('tabindex', prevTabIndex)
42
+ : this.baseElement.removeAttribute('tabindex');
43
+
44
+ e.target.removeEventListener('mouseup', onComplete);
45
+ e.target.removeEventListener('dragend', onComplete);
46
+ };
47
+
48
+ e.target.addEventListener('mouseup', onComplete, { once: true });
49
+ e.target.addEventListener('dragend', onComplete, { once: true });
50
+ }
51
+ });
52
+
53
+ super.init?.();
54
+ }
55
+
56
+ attributeChangedCallback(attrName, oldValue, newValue) {
57
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
58
+ if (attrName === 'draggable') {
59
+ this.#handleDraggableStyle(newValue === 'true');
60
+ }
61
+ }
62
+ };
@@ -1,15 +1,13 @@
1
1
  export const hoverableMixin = (superclass) =>
2
- class HoverableMixinClass extends superclass {
3
- init() {
4
- super.init?.();
2
+ class HoverableMixinClass extends superclass {
3
+ init() {
4
+ super.init?.();
5
5
 
6
- this.baseElement.addEventListener('mouseover', (e) => {
7
- this.setAttribute('hover', 'true');
8
- e.target.addEventListener(
9
- 'mouseleave',
10
- () => this.removeAttribute('hover'),
11
- { once: true }
12
- );
13
- })
14
- }
15
- };
6
+ this.baseElement.addEventListener('mouseover', (e) => {
7
+ this.setAttribute('hover', 'true');
8
+ e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
9
+ once: true,
10
+ });
11
+ });
12
+ }
13
+ };
@@ -4,9 +4,9 @@ export { createProxy } from './createProxy';
4
4
  export { proxyInputMixin } from './proxyInputMixin';
5
5
  export { componentNameValidationMixin } from './componentNameValidationMixin';
6
6
  export { hoverableMixin } from './hoverableMixin';
7
- export { inputValidationMixin } from './inputValidationMixin'
8
- export { portalMixin } from './portalMixin'
9
- export { changeMixin } from './changeMixin'
10
- export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin'
11
- export { lifecycleEventsMixin } from './lifecycleEventsMixin'
12
- export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin'
7
+ export { inputValidationMixin } from './inputValidationMixin';
8
+ export { portalMixin } from './portalMixin';
9
+ export { changeMixin } from './changeMixin';
10
+ export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin';
11
+ export { lifecycleEventsMixin } from './lifecycleEventsMixin';
12
+ export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
@@ -1,71 +1,72 @@
1
- import { createDispatchEvent } from "../helpers/mixinsHelpers";
1
+ import { createDispatchEvent } from '../helpers/mixinsHelpers';
2
2
 
3
- export const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
4
- init() {
5
- this.#blockNativeEvents();
3
+ export const inputEventsDispatchingMixin = (superclass) =>
4
+ class InputEventsDispatchingMixinClass extends superclass {
5
+ init() {
6
+ this.#blockNativeEvents();
6
7
 
7
- super.init?.();
8
- }
8
+ super.init?.();
9
+ }
9
10
 
10
- // we want to block the native (trusted) events and control when these events are being dispatched
11
- #blockNativeEvents() {
12
- ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
13
- this.addEventListener(event, (e) => {
14
- e.isTrusted && e.target === this && e.stopImmediatePropagation()
15
- })
16
- })
17
- }
11
+ // we want to block the native (trusted) events and control when these events are being dispatched
12
+ #blockNativeEvents() {
13
+ ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
14
+ this.addEventListener(event, (e) => {
15
+ e.isTrusted && e.target === this && e.stopImmediatePropagation();
16
+ });
17
+ });
18
+ }
18
19
 
19
- handleFocusEventsDispatching(inputs) {
20
- let timerId
20
+ handleFocusEventsDispatching(inputs) {
21
+ let timerId;
21
22
 
22
- // in order to simulate blur & focusout on root input element
23
- // we are checking if focus on one of the inner elements happened immediately after blur
24
- // if not, the component is no longer focused and we should dispatch blur & focusout
25
- inputs?.forEach(input => {
26
- input?.addEventListener('focusout', (e) => {
27
- e.stopImmediatePropagation();
28
- timerId = setTimeout(() => {
29
- timerId = null
23
+ // in order to simulate blur & focusout on root input element
24
+ // we are checking if focus on one of the inner elements happened immediately after blur
25
+ // if not, the component is no longer focused and we should dispatch blur & focusout
26
+ inputs?.forEach((input) => {
27
+ input?.addEventListener('focusout', (e) => {
28
+ e.stopImmediatePropagation();
29
+ timerId = setTimeout(() => {
30
+ timerId = null;
30
31
 
31
- createDispatchEvent.call(this, 'blur');
32
- createDispatchEvent.call(this, 'focusout', { bubbles: true });
32
+ createDispatchEvent.call(this, 'blur');
33
+ createDispatchEvent.call(this, 'focusout', { bubbles: true });
34
+ });
33
35
  });
34
- })
35
36
 
36
- // in order to simulate focus & focusin on the root input element
37
- // we are holding a timer id and clearing it on focusin
38
- // if there is a timer id, it means that the root input is still focused
39
- // otherwise, it was not focused before, and we should dispatch focus & focusin
40
- const onFocus = (e) => {
41
- e.stopImmediatePropagation();
42
- clearTimeout(timerId)
43
- if (!timerId) {
44
- createDispatchEvent.call(this, 'focus');
45
- createDispatchEvent.call(this, 'focusin', { bubbles: true });
46
- }
47
- }
37
+ // in order to simulate focus & focusin on the root input element
38
+ // we are holding a timer id and clearing it on focusin
39
+ // if there is a timer id, it means that the root input is still focused
40
+ // otherwise, it was not focused before, and we should dispatch focus & focusin
41
+ const onFocus = (e) => {
42
+ e.stopImmediatePropagation();
43
+ clearTimeout(timerId);
44
+ if (!timerId) {
45
+ createDispatchEvent.call(this, 'focus');
46
+ createDispatchEvent.call(this, 'focusin', { bubbles: true });
47
+ }
48
+ };
48
49
 
49
- // some components are not dispatching focusin but only focus
50
- input?.addEventListener('focusin', onFocus)
51
- input?.addEventListener('focus', onFocus)
52
- })
53
- }
50
+ // some components are not dispatching focusin but only focus
51
+ input?.addEventListener('focusin', onFocus);
52
+ input?.addEventListener('focus', onFocus);
53
+ });
54
+ }
54
55
 
55
- // we want to block the input events from propagating in case the value of the root input wasn't change
56
- // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
57
- // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
58
- handleInputEventDispatching() {
59
- let previousRootComponentValue = this.value
56
+ // we want to block the input events from propagating in case the value of the root input wasn't change
57
+ // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
58
+ // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
59
+ handleInputEventDispatching() {
60
+ let previousRootComponentValue = this.value;
60
61
 
61
- this.addEventListener('input', (e) => {
62
- // we are comparing the previous value to the new one,
63
- // and if they have the same value, we are blocking the input event
64
- if (previousRootComponentValue === this.value) {
65
- e.stopImmediatePropagation();
66
- } else {
67
- previousRootComponentValue = this.value
68
- }
69
- });
70
- }
71
- }
62
+ this.addEventListener('input', (e) => {
63
+ // we are comparing the previous value to the new one,
64
+ // and if they have the same value, we are blocking the input event
65
+ if (previousRootComponentValue === this.value) {
66
+ e.stopImmediatePropagation();
67
+ } else {
68
+ previousRootComponentValue = this.value;
69
+ }
70
+ });
71
+ }
72
+ };
@@ -1,154 +1,159 @@
1
- const observedAttributes = [
2
- 'required',
3
- 'pattern',
4
- ]
1
+ const observedAttributes = ['required', 'pattern'];
5
2
 
6
3
  const errorAttributes = {
7
4
  valueMissing: 'data-errormessage-value-missing',
8
5
  patternMismatch: 'data-errormessage-pattern-mismatch',
9
6
  tooShort: 'data-errormessage-pattern-mismatch-too-short',
10
7
  tooLong: 'data-errormessage-pattern-mismatch-too-long',
11
- }
12
- export const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
13
- static get observedAttributes() {
14
- return [
15
- ...superclass.observedAttributes || [],
16
- ...observedAttributes
17
- ];
18
- }
19
-
20
- static get formAssociated() {
21
- return true;
22
- }
23
-
24
- #internals
25
-
26
- constructor() {
27
- super();
28
-
29
- this.#internals = this.attachInternals();
30
- }
31
-
32
- get defaultErrorMsgValueMissing() {
33
- return 'Please fill out this field.'
34
- }
35
-
36
- get defaultErrorMsgPatternMismatch() {
37
- return 'Please match the requested format.'
38
- }
39
-
40
- get defaultErrorMsgTooShort() {
41
- return `Minimum length is ${this.getAttribute('minlength')}.`
42
- }
43
-
44
- get defaultErrorMsgTooLong() {
45
- return `Maximum length is ${this.getAttribute('maxlength')}. `
46
- }
47
-
48
- getErrorMessage(flags) {
49
- const {
50
- valueMissing,
51
- patternMismatch,
52
- typeMismatch,
53
- stepMismatch,
54
- tooShort,
55
- tooLong,
56
- rangeOverflow,
57
- rangeUnderflow,
58
- badInput,
59
- customError
60
- } = flags;
61
- switch (true) {
62
- case valueMissing:
63
- return this.getAttribute(errorAttributes.valueMissing) ||
64
- this.defaultErrorMsgValueMissing
65
- case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
66
- return this.getAttribute(errorAttributes.patternMismatch) ||
67
- this.defaultErrorMsgPatternMismatch
68
- case tooShort:
69
- return this.getAttribute(errorAttributes.tooShort) ||
70
- this.defaultErrorMsgTooShort
71
- case tooLong:
72
- return this.getAttribute(errorAttributes.tooLong) ||
73
- this.defaultErrorMsgTooLong
74
- case customError:
75
- return this.validationMessage
76
- default:
77
- return ''
78
- }
79
- }
80
-
81
- #setValidity() {
82
- const validity = this.isReadOnly ? {} : this.getValidity()
83
- this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget)
84
- }
85
-
86
- get validationMessage() {
87
- return this.#internals.validationMessage;
88
- }
89
-
90
- getValidity() {
91
- console.warn('getValidity', 'is not implemented')
92
- }
93
-
94
- checkValidity() {
95
- return this.#internals.validity.valid
96
- }
97
-
98
- reportValidity() {
99
- return this.#internals.reportValidity()
100
- }
101
-
102
- get validity() {
103
- return this.#internals.validity
104
- }
105
-
106
- get validationTarget() {
107
- return this.inputElement
108
- }
109
-
110
- setCustomValidity(errorMessage) {
111
- if (errorMessage) {
112
- this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget)
113
- } else {
114
- this.#internals.setValidity({})
115
- this.#setValidity()
116
- }
117
- }
118
-
119
- get isRequired() {
120
- return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
121
- }
122
-
123
- get isReadOnly() {
124
- return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
125
- }
126
-
127
- get pattern() {
128
- return this.getAttribute('pattern')
129
- }
130
-
131
- get form() {
132
- return this.#internals.form
133
- }
134
-
135
- attributeChangedCallback(attrName, oldValue, newValue) {
136
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
137
-
138
- if (observedAttributes.includes(attrName)) {
139
- this.#setValidity();
140
- }
141
- }
142
-
143
- init() {
144
- super.init?.();
145
- this.addEventListener('change', this.#setValidity)
146
- this.addEventListener('invalid', (e) => e.stopPropagation())
147
- this.addEventListener('input', this.#setValidity)
148
-
149
- // The attribute sync takes time, so getValidity returns valid,
150
- // even when it shouldn't. This way allows all attributes to sync
151
- // after render, before checking the validity.
152
- setTimeout(() => this.#setValidity());
153
- }
154
- }
8
+ };
9
+ export const inputValidationMixin = (superclass) =>
10
+ class InputValidationMixinClass extends superclass {
11
+ static get observedAttributes() {
12
+ return [...(superclass.observedAttributes || []), ...observedAttributes];
13
+ }
14
+
15
+ static get formAssociated() {
16
+ return true;
17
+ }
18
+
19
+ #internals;
20
+
21
+ constructor() {
22
+ super();
23
+
24
+ this.#internals = this.attachInternals();
25
+ }
26
+
27
+ // eslint-disable-next-line class-methods-use-this
28
+ get defaultErrorMsgValueMissing() {
29
+ return 'Please fill out this field.';
30
+ }
31
+
32
+ // eslint-disable-next-line class-methods-use-this
33
+ get defaultErrorMsgPatternMismatch() {
34
+ return 'Please match the requested format.';
35
+ }
36
+
37
+ get defaultErrorMsgTooShort() {
38
+ return `Minimum length is ${this.getAttribute('minlength')}.`;
39
+ }
40
+
41
+ get defaultErrorMsgTooLong() {
42
+ return `Maximum length is ${this.getAttribute('maxlength')}. `;
43
+ }
44
+
45
+ getErrorMessage(flags) {
46
+ const {
47
+ valueMissing,
48
+ patternMismatch,
49
+ typeMismatch,
50
+ stepMismatch,
51
+ tooShort,
52
+ tooLong,
53
+ rangeOverflow,
54
+ rangeUnderflow,
55
+ badInput,
56
+ customError,
57
+ } = flags;
58
+ switch (true) {
59
+ case valueMissing:
60
+ return (
61
+ this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
62
+ );
63
+ case patternMismatch ||
64
+ typeMismatch ||
65
+ stepMismatch ||
66
+ rangeOverflow ||
67
+ rangeUnderflow ||
68
+ badInput:
69
+ return (
70
+ this.getAttribute(errorAttributes.patternMismatch) ||
71
+ this.defaultErrorMsgPatternMismatch
72
+ );
73
+ case tooShort:
74
+ return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
75
+ case tooLong:
76
+ return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
77
+ case customError:
78
+ return this.validationMessage;
79
+ default:
80
+ return '';
81
+ }
82
+ }
83
+
84
+ #setValidity() {
85
+ const validity = this.isReadOnly ? {} : this.getValidity();
86
+ this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
87
+ }
88
+
89
+ get validationMessage() {
90
+ return this.#internals.validationMessage;
91
+ }
92
+
93
+ // eslint-disable-next-line class-methods-use-this
94
+ getValidity() {
95
+ // eslint-disable-next-line no-console
96
+ console.warn('getValidity', 'is not implemented');
97
+ }
98
+
99
+ checkValidity() {
100
+ return this.#internals.validity.valid;
101
+ }
102
+
103
+ reportValidity() {
104
+ return this.#internals.reportValidity();
105
+ }
106
+
107
+ get validity() {
108
+ return this.#internals.validity;
109
+ }
110
+
111
+ get validationTarget() {
112
+ return this.inputElement;
113
+ }
114
+
115
+ setCustomValidity(errorMessage) {
116
+ if (errorMessage) {
117
+ this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
118
+ } else {
119
+ this.#internals.setValidity({});
120
+ this.#setValidity();
121
+ }
122
+ }
123
+
124
+ get isRequired() {
125
+ return this.hasAttribute('required') && this.getAttribute('required') !== 'false';
126
+ }
127
+
128
+ get isReadOnly() {
129
+ return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
130
+ }
131
+
132
+ get pattern() {
133
+ return this.getAttribute('pattern');
134
+ }
135
+
136
+ get form() {
137
+ return this.#internals.form;
138
+ }
139
+
140
+ attributeChangedCallback(attrName, oldValue, newValue) {
141
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
142
+
143
+ if (observedAttributes.includes(attrName)) {
144
+ this.#setValidity();
145
+ }
146
+ }
147
+
148
+ init() {
149
+ super.init?.();
150
+ this.addEventListener('change', this.#setValidity);
151
+ this.addEventListener('invalid', (e) => e.stopPropagation());
152
+ this.addEventListener('input', this.#setValidity);
153
+
154
+ // The attribute sync takes time, so getValidity returns valid,
155
+ // even when it shouldn't. This way allows all attributes to sync
156
+ // after render, before checking the validity.
157
+ setTimeout(() => this.#setValidity());
158
+ }
159
+ };
@@ -1,21 +1,23 @@
1
- import { createDispatchEvent } from "../helpers/mixinsHelpers";
1
+ import { createDispatchEvent } from '../helpers/mixinsHelpers';
2
2
 
3
- export const lifecycleEventsMixin = (superclass) => class LifecycleEventsMixinClass extends superclass {
4
- #dispatchConnected = createDispatchEvent.bind(this, 'connected')
5
- #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
3
+ export const lifecycleEventsMixin = (superclass) =>
4
+ class LifecycleEventsMixinClass extends superclass {
5
+ #dispatchConnected = createDispatchEvent.bind(this, 'connected');
6
6
 
7
- connectedCallback() {
8
- if (this.rootElement.isConnected) {
9
- super.connectedCallback?.();
7
+ #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected');
10
8
 
11
- // we are waiting for all components to listen before dispatching
12
- setTimeout(this.#dispatchConnected)
9
+ connectedCallback() {
10
+ if (this.rootElement.isConnected) {
11
+ super.connectedCallback?.();
12
+
13
+ // we are waiting for all components to listen before dispatching
14
+ setTimeout(this.#dispatchConnected);
15
+ }
13
16
  }
14
- }
15
17
 
16
- disconnectedCallback() {
17
- super.disconnectedCallback?.();
18
+ disconnectedCallback() {
19
+ super.disconnectedCallback?.();
18
20
 
19
- this.#dispatchDisconnected()
20
- }
21
- }
21
+ this.#dispatchDisconnected();
22
+ }
23
+ };