@alfalab/core-components-confirmation 8.3.0 → 9.0.0

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 (42) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/dist/component.js +2 -2
  3. package/dist/components/code-input/component.js +2 -1
  4. package/dist/components/code-input/index.css +13 -9
  5. package/dist/components/countdown/component.js +1 -1
  6. package/dist/components/countdown/index.css +13 -13
  7. package/dist/components/countdown-loader/component.js +1 -1
  8. package/dist/components/countdown-loader/index.css +2 -2
  9. package/dist/components/overlimit/component.js +1 -1
  10. package/dist/components/overlimit/index.css +9 -9
  11. package/dist/components/sign-confirmation/component.js +2 -2
  12. package/dist/components/sign-confirmation/index.css +13 -13
  13. package/dist/cssm/component.js +1 -1
  14. package/dist/cssm/components/code-input/component.js +1 -0
  15. package/dist/cssm/components/code-input/index.module.css +4 -0
  16. package/dist/cssm/components/sign-confirmation/component.js +1 -1
  17. package/dist/esm/component.js +2 -2
  18. package/dist/esm/components/code-input/component.js +2 -1
  19. package/dist/esm/components/code-input/index.css +13 -9
  20. package/dist/esm/components/countdown/component.js +1 -1
  21. package/dist/esm/components/countdown/index.css +13 -13
  22. package/dist/esm/components/countdown-loader/component.js +1 -1
  23. package/dist/esm/components/countdown-loader/index.css +2 -2
  24. package/dist/esm/components/overlimit/component.js +1 -1
  25. package/dist/esm/components/overlimit/index.css +9 -9
  26. package/dist/esm/components/sign-confirmation/component.js +2 -2
  27. package/dist/esm/components/sign-confirmation/index.css +13 -13
  28. package/dist/esm/index.css +14 -14
  29. package/dist/index.css +14 -14
  30. package/dist/modern/component.js +2 -2
  31. package/dist/modern/components/code-input/component.js +2 -1
  32. package/dist/modern/components/code-input/index.css +13 -9
  33. package/dist/modern/components/countdown/component.js +1 -1
  34. package/dist/modern/components/countdown/index.css +13 -13
  35. package/dist/modern/components/countdown-loader/component.js +1 -1
  36. package/dist/modern/components/countdown-loader/index.css +2 -2
  37. package/dist/modern/components/overlimit/component.js +1 -1
  38. package/dist/modern/components/overlimit/index.css +9 -9
  39. package/dist/modern/components/sign-confirmation/component.js +2 -2
  40. package/dist/modern/components/sign-confirmation/index.css +13 -13
  41. package/dist/modern/index.css +14 -14
  42. package/package.json +4 -4
@@ -1,4 +1,4 @@
1
- /* hash: 3dv1y */
1
+ /* hash: evxzn */
2
2
  :root {
3
3
  --color-static-status-red: #d91d0b;
4
4
  }
@@ -45,12 +45,12 @@
45
45
 
46
46
  /* input */
47
47
  }
48
- .confirmation__component_3dv1y {
48
+ .confirmation__component_370bh {
49
49
  display: flex;
50
50
  flex-direction: column;
51
51
  align-items: center;
52
52
  }
53
- .confirmation__title_3dv1y {
53
+ .confirmation__title_370bh {
54
54
  font-size: var(--confirmation-title-font-size);
55
55
  line-height: var(--confirmation-title-line-height);
56
56
  font-weight: var(--confirmation-title-font-weight);
@@ -60,30 +60,30 @@
60
60
 
61
61
  margin-bottom: var(--gap-3xl);
62
62
  }
63
- .confirmation__description_3dv1y {
63
+ .confirmation__description_370bh {
64
64
  font-size: var(--confirmation-text-font-size);
65
65
  line-height: var(--confirmation-text-line-height);
66
66
  font-weight: var(--confirmation-text-font-weight);
67
67
  font-family: var(--confirmation-text-font-family);
68
68
  color: var(--confirmation-text-color);
69
69
  }
70
- .confirmation__countdown_3dv1y {
70
+ .confirmation__countdown_370bh {
71
71
  display: flex;
72
72
  align-items: center;
73
73
  justify-content: center;
74
74
  margin-top: var(--gap-2xs);
75
75
  }
76
- .confirmation__loader_3dv1y {
76
+ .confirmation__loader_370bh {
77
77
  margin-right: var(--gap-xs);
78
78
  }
79
- .confirmation__timePassed_3dv1y {
79
+ .confirmation__timePassed_370bh {
80
80
  display: flex;
81
81
  min-width: 3em;
82
82
  }
83
- .confirmation__getCodeButton_3dv1y {
83
+ .confirmation__getCodeButton_370bh {
84
84
  margin-top: var(--gap-2xl);
85
85
  }
86
- .confirmation__alertIcon_3dv1y {
86
+ .confirmation__alertIcon_370bh {
87
87
  text-align: center;
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--color-static-status-red);
@@ -10,7 +10,7 @@ import { Loader } from '@alfalab/core-components-loader/dist/modern';
10
10
  import '../code-input/utils.js';
11
11
  import { CodeInput } from '../code-input/component.js';
12
12
 
13
- var styles = {"component":"confirmation__component_1nv3s","countdown":"confirmation__countdown_1nv3s","hidden":"confirmation__hidden_1nv3s","header":"confirmation__header_1nv3s","inputContainer":"confirmation__inputContainer_1nv3s","smsComeLinkWrap":"confirmation__smsComeLinkWrap_1nv3s","smsComeLink":"confirmation__smsComeLink_1nv3s","error":"confirmation__error_1nv3s","loaderWrap":"confirmation__loaderWrap_1nv3s","loaderText":"confirmation__loaderText_1nv3s","center":"confirmation__center_1nv3s","codeInput":"confirmation__codeInput_1nv3s"};
13
+ var styles = {"component":"confirmation__component_1q5is","countdown":"confirmation__countdown_1q5is","hidden":"confirmation__hidden_1q5is","header":"confirmation__header_1q5is","inputContainer":"confirmation__inputContainer_1q5is","smsComeLinkWrap":"confirmation__smsComeLinkWrap_1q5is","smsComeLink":"confirmation__smsComeLink_1q5is","error":"confirmation__error_1q5is","loaderWrap":"confirmation__loaderWrap_1q5is","loaderText":"confirmation__loaderText_1q5is","center":"confirmation__center_1q5is","codeInput":"confirmation__codeInput_1q5is"};
14
14
  require('./index.css')
15
15
 
16
16
  const SignConfirmation = ({ codeChecking, codeSending, smsHintVisible, requiredCharAmount, countdownDuration, additionalContent, hasPhoneMask, phone, code: inputValue, error, errorText, title, hasSmsCountdown, inputRef, codeCheckingText, codeSendingText, alignContent, noAttemptsLeftMessage, buttonRetryText, countdownContent, onInputFinished, onInputChange, onSmsRetryClick, onCountdownFinished, onSmsHintLinkClick, }) => {
@@ -37,7 +37,7 @@ const SignConfirmation = ({ codeChecking, codeSending, smsHintVisible, requiredC
37
37
  typeof title === 'string' ? React.createElement("span", { className: styles.header }, title) : title,
38
38
  React.createElement("div", { className: styles.inputContainer },
39
39
  React.createElement(CodeInput, { processing: processing, error: error, value: inputValue, ref: inputRef, slotsCount: requiredCharAmount, className: styles.codeInput, alignContent: alignContent, handleChange: handleInputChange, handleInputKeyDown: handleInputKeyDown }),
40
- displayedError && React.createElement("div", { className: styles.error }, displayedError)),
40
+ displayedError && (React.createElement("div", { className: styles.error, role: 'alert' }, displayedError))),
41
41
  processing && (React.createElement("div", { className: styles.loaderWrap },
42
42
  React.createElement(Loader, null),
43
43
  React.createElement("span", { className: styles.loaderText }, codeChecking ? codeCheckingText : codeSendingText))),
@@ -1,4 +1,4 @@
1
- /* hash: 1nv3s */
1
+ /* hash: 19hj1 */
2
2
  :root {
3
3
  --color-light-text-negative: #d91d0b;
4
4
  --color-light-text-primary: #0b1f35;
@@ -43,20 +43,20 @@
43
43
 
44
44
  /* input */
45
45
  }
46
- .confirmation__component_1nv3s {
46
+ .confirmation__component_1q5is {
47
47
  display: flex;
48
48
  flex-direction: column;
49
49
  }
50
- .confirmation__countdown_1nv3s {
50
+ .confirmation__countdown_1q5is {
51
51
  max-height: 300px;
52
52
  overflow: hidden;
53
53
  transition: max-height 0.15s ease;
54
54
  }
55
- .confirmation__hidden_1nv3s {
55
+ .confirmation__hidden_1q5is {
56
56
  opacity: 0;
57
57
  max-height: 0;
58
58
  }
59
- .confirmation__header_1nv3s {
59
+ .confirmation__header_1q5is {
60
60
  font-size: var(--confirmation-title-font-size);
61
61
  line-height: var(--confirmation-title-line-height);
62
62
  font-weight: var(--confirmation-title-font-weight);
@@ -67,19 +67,19 @@
67
67
  margin-bottom: var(--gap-3xl);
68
68
  color: var(--confirmation-title-color);
69
69
  }
70
- .confirmation__inputContainer_1nv3s {
70
+ .confirmation__inputContainer_1q5is {
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  }
74
- .confirmation__smsComeLinkWrap_1nv3s {
74
+ .confirmation__smsComeLinkWrap_1q5is {
75
75
  margin-top: var(--gap-l);
76
76
  }
77
- .confirmation__smsComeLink_1nv3s {
77
+ .confirmation__smsComeLink_1q5is {
78
78
  font-size: 14px;
79
79
  line-height: 20px;
80
80
  font-weight: 400;
81
81
  }
82
- .confirmation__error_1nv3s {
82
+ .confirmation__error_1q5is {
83
83
  font-size: 14px;
84
84
  line-height: 20px;
85
85
  font-weight: 400;
@@ -87,12 +87,12 @@
87
87
  margin-top: var(--gap-xs);
88
88
  color: var(--confirmation-error-color);
89
89
  }
90
- .confirmation__loaderWrap_1nv3s {
90
+ .confirmation__loaderWrap_1q5is {
91
91
  display: flex;
92
92
  align-items: center;
93
93
  margin: var(--gap-3xl) 0 var(--gap-xs);
94
94
  }
95
- .confirmation__loaderText_1nv3s {
95
+ .confirmation__loaderText_1q5is {
96
96
  font-size: var(--confirmation-text-font-size);
97
97
  line-height: var(--confirmation-text-line-height);
98
98
  font-weight: var(--confirmation-text-font-weight);
@@ -102,7 +102,7 @@
102
102
  margin-left: var(--gap-s);
103
103
  color: var(--confirmation-text-color);
104
104
  }
105
- .confirmation__center_1nv3s .confirmation__codeInput_1nv3s,
106
- .confirmation__center_1nv3s .confirmation__loaderWrap_1nv3s {
105
+ .confirmation__center_1q5is .confirmation__codeInput_1q5is,
106
+ .confirmation__center_1q5is .confirmation__loaderWrap_1q5is {
107
107
  justify-content: center;
108
108
  }
@@ -1,4 +1,4 @@
1
- /* hash: 4oaka */
1
+ /* hash: 1s7bo */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  --color-light-text-secondary: #546272;
@@ -41,18 +41,18 @@
41
41
 
42
42
  /* input */
43
43
  }
44
- .confirmation__component_4oaka {
44
+ .confirmation__component_h92d1 {
45
45
  display: flex;
46
46
  flex-direction: column;
47
47
  width: 100%;
48
48
  font-family: var(--confirmation-font-family);
49
49
  }
50
- .confirmation__error_4oaka {
50
+ .confirmation__error_h92d1 {
51
51
  display: flex;
52
52
  flex-direction: column;
53
53
  align-items: flex-start;
54
54
  }
55
- .confirmation__errorHeader_4oaka {
55
+ .confirmation__errorHeader_h92d1 {
56
56
  font-size: var(--confirmation-title-font-size);
57
57
  line-height: var(--confirmation-title-line-height);
58
58
  font-weight: var(--confirmation-title-font-weight);
@@ -63,7 +63,7 @@
63
63
  margin-bottom: var(--gap-2xl);
64
64
  color: var(--confirmation-title-color);
65
65
  }
66
- .confirmation__errorText_4oaka {
66
+ .confirmation__errorText_h92d1 {
67
67
  font-size: var(--confirmation-text-font-size);
68
68
  line-height: var(--confirmation-text-line-height);
69
69
  font-weight: var(--confirmation-text-font-weight);
@@ -73,12 +73,12 @@
73
73
  margin-bottom: var(--gap-2xl);
74
74
  color: var(--confirmation-text-color);
75
75
  }
76
- .confirmation__phoneHintWrap_4oaka {
76
+ .confirmation__phoneHintWrap_h92d1 {
77
77
  display: flex;
78
78
  flex-direction: column;
79
79
  align-items: flex-start;
80
80
  }
81
- .confirmation__phoneHintText_4oaka {
81
+ .confirmation__phoneHintText_h92d1 {
82
82
  font-size: var(--confirmation-text-font-size);
83
83
  line-height: var(--confirmation-text-line-height);
84
84
  font-weight: var(--confirmation-text-font-weight);
@@ -88,7 +88,7 @@
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--confirmation-text-color);
90
90
  }
91
- .confirmation__phonesWrap_4oaka {
91
+ .confirmation__phonesWrap_h92d1 {
92
92
  font-size: var(--confirmation-text-font-size);
93
93
  line-height: var(--confirmation-text-line-height);
94
94
  font-weight: var(--confirmation-text-font-weight);
@@ -99,21 +99,21 @@
99
99
  flex-direction: column;
100
100
  margin-bottom: var(--gap-4xl);
101
101
  }
102
- .confirmation__phoneWrap_4oaka {
102
+ .confirmation__phoneWrap_h92d1 {
103
103
  margin-bottom: var(--gap-xs)
104
104
  }
105
- .confirmation__phoneWrap_4oaka:last-child {
105
+ .confirmation__phoneWrap_h92d1:last-child {
106
106
  margin-bottom: 0;
107
107
  }
108
- .confirmation__phoneDescription_4oaka {
108
+ .confirmation__phoneDescription_h92d1 {
109
109
  color: var(--confirmation-text-color);
110
110
  }
111
- .confirmation__component_4oaka.confirmation__center_4oaka {
111
+ .confirmation__component_h92d1.confirmation__center_h92d1 {
112
112
  text-align: center;
113
113
  }
114
- .confirmation__center_4oaka .confirmation__phoneHintWrap_4oaka {
114
+ .confirmation__center_h92d1 .confirmation__phoneHintWrap_h92d1 {
115
115
  align-items: center;
116
116
  }
117
- .confirmation__center_4oaka .confirmation__error_4oaka {
117
+ .confirmation__center_h92d1 .confirmation__error_h92d1 {
118
118
  align-items: center;
119
119
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-confirmation",
3
- "version": "8.3.0",
3
+ "version": "9.0.0",
4
4
  "description": "Sms confirmation component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -16,16 +16,16 @@
16
16
  "access": "public"
17
17
  },
18
18
  "dependencies": {
19
- "@alfalab/core-components-button": "^4.4.0",
19
+ "@alfalab/core-components-button": "^5.0.0",
20
20
  "@alfalab/core-components-link": "^3.2.0",
21
21
  "@alfalab/core-components-loader": "^2.0.1",
22
22
  "@alfalab/hooks": "^1.0.0",
23
- "@alfalab/icons-glyph": "^1.150.0",
23
+ "@alfalab/icons-glyph": "^1.190.0",
24
24
  "@alfalab/utils": "^1.3.0",
25
25
  "classnames": "^2.2.6"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": "^16.9.0 || ^17.0.1"
29
29
  },
30
- "gitHead": "06ce84bb0c1b831858968f9a5d0bface6a163dc0"
30
+ "gitHead": "10c9fd1caacf98a5c15f84529889ddf41e9e1b54"
31
31
  }