@alfalab/core-components-bank-card 5.2.7 → 5.2.9

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 (14) hide show
  1. package/Component.js +19 -21
  2. package/cssm/Component.js +19 -21
  3. package/cssm/index.js +1 -3
  4. package/cssm/utils.js +0 -2
  5. package/esm/Component.js +1 -1
  6. package/esm/index.css +20 -20
  7. package/esm/index.js +1 -1
  8. package/index.css +20 -20
  9. package/index.js +1 -3
  10. package/modern/Component.js +1 -1
  11. package/modern/index.css +20 -20
  12. package/modern/index.js +1 -1
  13. package/package.json +2 -2
  14. package/utils.js +0 -2
package/Component.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
5
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
@@ -12,12 +10,12 @@ var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
12
10
  var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
13
11
  var utils = require('./utils.js');
14
12
 
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
16
14
 
17
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
17
 
20
- var styles = {"component":"bank-card__component_ccgez","aspectRatioContainer":"bank-card__aspectRatioContainer_ccgez","content":"bank-card__content_ccgez","label":"bank-card__label_ccgez","focused":"bank-card__focused_ccgez","filled":"bank-card__filled_ccgez","input":"bank-card__input_ccgez","bankLogo":"bank-card__bankLogo_ccgez","brandLogo":"bank-card__brandLogo_ccgez","usePhoto":"bank-card__usePhoto_ccgez"};
18
+ var styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
21
19
  require('./index.css')
22
20
 
23
21
  // prettier-ignore
@@ -29,18 +27,18 @@ var getBrandIcon = function (value) {
29
27
  // Показываем логотип только после ввода всех цифр карты
30
28
  if (value.replace(/\s/g, '').length === 16 && utils.validateCardNumber(value)) {
31
29
  if (value.startsWith('2'))
32
- return React__default['default'].createElement(MirXxlIcon.MirXxlIcon, null);
30
+ return React__default.default.createElement(MirXxlIcon.MirXxlIcon, null);
33
31
  if (value.startsWith('4'))
34
- return React__default['default'].createElement(VisaXxlIcon.VisaXxlIcon, null);
32
+ return React__default.default.createElement(VisaXxlIcon.VisaXxlIcon, null);
35
33
  if (value.startsWith('5'))
36
- return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
34
+ return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
37
35
  if (value.startsWith('6'))
38
- return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
36
+ return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
39
37
  }
40
38
  return null;
41
39
  };
42
- var BankCard = React__default['default'].forwardRef(function (_a, ref) {
43
- var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
40
+ var BankCard = React__default.default.forwardRef(function (_a, ref) {
41
+ var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
44
42
  var uncontrolled = value === undefined;
45
43
  var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
46
44
  var getMask = React.useCallback(function (newValue) {
@@ -54,20 +52,20 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
54
52
  onChange(event, payload);
55
53
  }
56
54
  }, [onChange, uncontrolled]);
57
- var renderRightAddons = React.useCallback(function () { return (React__default['default'].createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
58
- React__default['default'].createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
55
+ var renderRightAddons = React.useCallback(function () { return (React__default.default.createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
56
+ React__default.default.createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
59
57
  React.useEffect(function () {
60
58
  setBrandIcon(getBrandIcon(value));
61
59
  }, [value]);
62
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className) },
63
- React__default['default'].createElement("div", { className: styles.aspectRatioContainer },
64
- React__default['default'].createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
65
- React__default['default'].createElement("div", { className: styles.bankLogo }, bankLogo),
66
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
67
- brandIcon && React__default['default'].createElement("div", { className: styles.brandLogo }, brandIcon)))));
60
+ return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
61
+ React__default.default.createElement("div", { className: styles.aspectRatioContainer },
62
+ React__default.default.createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
63
+ React__default.default.createElement("div", { className: styles.bankLogo }, bankLogo),
64
+ React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
65
+ brandIcon && React__default.default.createElement("div", { className: styles.brandLogo }, brandIcon)))));
68
66
  });
69
67
  BankCard.defaultProps = {
70
- bankLogo: React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null),
68
+ bankLogo: React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null),
71
69
  backgroundColor: '#EF3124',
72
70
  inputLabel: 'Номер карты или счёта',
73
71
  };
package/cssm/Component.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
5
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
@@ -13,11 +11,11 @@ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
13
11
  var utils = require('./utils.js');
14
12
  var styles = require('./index.module.css');
15
13
 
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
17
15
 
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
16
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
+ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
21
19
 
22
20
  // prettier-ignore
23
21
  var cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
@@ -28,18 +26,18 @@ var getBrandIcon = function (value) {
28
26
  // Показываем логотип только после ввода всех цифр карты
29
27
  if (value.replace(/\s/g, '').length === 16 && utils.validateCardNumber(value)) {
30
28
  if (value.startsWith('2'))
31
- return React__default['default'].createElement(MirXxlIcon.MirXxlIcon, null);
29
+ return React__default.default.createElement(MirXxlIcon.MirXxlIcon, null);
32
30
  if (value.startsWith('4'))
33
- return React__default['default'].createElement(VisaXxlIcon.VisaXxlIcon, null);
31
+ return React__default.default.createElement(VisaXxlIcon.VisaXxlIcon, null);
34
32
  if (value.startsWith('5'))
35
- return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
33
+ return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
36
34
  if (value.startsWith('6'))
37
- return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
35
+ return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
38
36
  }
39
37
  return null;
40
38
  };
41
- var BankCard = React__default['default'].forwardRef(function (_a, ref) {
42
- var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
39
+ var BankCard = React__default.default.forwardRef(function (_a, ref) {
40
+ var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
43
41
  var uncontrolled = value === undefined;
44
42
  var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
45
43
  var getMask = React.useCallback(function (newValue) {
@@ -53,20 +51,20 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
53
51
  onChange(event, payload);
54
52
  }
55
53
  }, [onChange, uncontrolled]);
56
- var renderRightAddons = React.useCallback(function () { return (React__default['default'].createElement("button", { type: 'button', className: styles__default['default'].usePhoto, onClick: onUsePhoto },
57
- React__default['default'].createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
54
+ var renderRightAddons = React.useCallback(function () { return (React__default.default.createElement("button", { type: 'button', className: styles__default.default.usePhoto, onClick: onUsePhoto },
55
+ React__default.default.createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
58
56
  React.useEffect(function () {
59
57
  setBrandIcon(getBrandIcon(value));
60
58
  }, [value]);
61
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className) },
62
- React__default['default'].createElement("div", { className: styles__default['default'].aspectRatioContainer },
63
- React__default['default'].createElement("div", { className: styles__default['default'].content, style: { backgroundColor: backgroundColor } },
64
- React__default['default'].createElement("div", { className: styles__default['default'].bankLogo }, bankLogo),
65
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default['default'].input, labelClassName: styles__default['default'].label, filledClassName: styles__default['default'].filled, focusedClassName: styles__default['default'].focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
66
- brandIcon && React__default['default'].createElement("div", { className: styles__default['default'].brandLogo }, brandIcon)))));
59
+ return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
60
+ React__default.default.createElement("div", { className: styles__default.default.aspectRatioContainer },
61
+ React__default.default.createElement("div", { className: styles__default.default.content, style: { backgroundColor: backgroundColor } },
62
+ React__default.default.createElement("div", { className: styles__default.default.bankLogo }, bankLogo),
63
+ React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default.default.input, labelClassName: styles__default.default.label, filledClassName: styles__default.default.filled, focusedClassName: styles__default.default.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
64
+ brandIcon && React__default.default.createElement("div", { className: styles__default.default.brandLogo }, brandIcon)))));
67
65
  });
68
66
  BankCard.defaultProps = {
69
- bankLogo: React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null),
67
+ bankLogo: React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null),
70
68
  backgroundColor: '#EF3124',
71
69
  inputLabel: 'Номер карты или счёта',
72
70
  };
package/cssm/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var Component = require('./Component.js');
5
4
  require('react');
6
5
  require('classnames');
7
6
  require('@alfalab/core-components-masked-input/cssm');
@@ -12,7 +11,6 @@ require('@alfalab/icons-logotype/MirXxlIcon');
12
11
  require('@alfalab/icons-logotype/VisaXxlIcon');
13
12
  require('./utils.js');
14
13
  require('./index.module.css');
15
- var Component = require('./Component.js');
16
14
 
17
15
 
18
16
 
package/cssm/utils.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  /**
6
4
  * Проверяет номер карты по алгоритму Луна
7
5
  *
package/esm/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
8
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_ccgez","aspectRatioContainer":"bank-card__aspectRatioContainer_ccgez","content":"bank-card__content_ccgez","label":"bank-card__label_ccgez","focused":"bank-card__focused_ccgez","filled":"bank-card__filled_ccgez","input":"bank-card__input_ccgez","bankLogo":"bank-card__bankLogo_ccgez","brandLogo":"bank-card__brandLogo_ccgez","usePhoto":"bank-card__usePhoto_ccgez"};
11
+ var styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qmown */
1
+ /* hash: c0u0h */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_ccgez {
26
+ .bank-card__component_zuhzr {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_ccgez {
46
+ .bank-card__aspectRatioContainer_zuhzr {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_ccgez {
50
+ .bank-card__content_zuhzr {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_ccgez {
63
+ .bank-card__label_zuhzr {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_ccgez {
71
+ .bank-card__label_zuhzr {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_ccgez .bank-card__label_ccgez,
76
- .bank-card__filled_ccgez .bank-card__label_ccgez {
75
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_ccgez .bank-card__label_ccgez,
82
- .bank-card__filled_ccgez .bank-card__label_ccgez {
81
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_ccgez:before {
86
+ .bank-card__focused_zuhzr:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_ccgez {
89
+ .bank-card__input_zuhzr {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_ccgez {
104
+ .bank-card__input_zuhzr {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_ccgez {
108
+ .bank-card__bankLogo_zuhzr {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_ccgez svg {
113
+ .bank-card__bankLogo_zuhzr svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_ccgez svg g {
118
+ .bank-card__bankLogo_zuhzr svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_ccgez {
121
+ .bank-card__brandLogo_zuhzr {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_ccgez svg {
126
+ .bank-card__brandLogo_zuhzr svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_ccgez {
130
+ .bank-card__usePhoto_zuhzr {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_ccgez svg {
148
+ .bank-card__usePhoto_zuhzr svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { BankCard } from './Component.js';
1
2
  import 'react';
2
3
  import 'classnames';
3
4
  import '@alfalab/core-components-masked-input/esm';
@@ -7,4 +8,3 @@ import '@alfalab/icons-logotype/MastercardLIcon';
7
8
  import '@alfalab/icons-logotype/MirXxlIcon';
8
9
  import '@alfalab/icons-logotype/VisaXxlIcon';
9
10
  import './utils.js';
10
- export { BankCard } from './Component.js';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qmown */
1
+ /* hash: c0u0h */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_ccgez {
26
+ .bank-card__component_zuhzr {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_ccgez {
46
+ .bank-card__aspectRatioContainer_zuhzr {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_ccgez {
50
+ .bank-card__content_zuhzr {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_ccgez {
63
+ .bank-card__label_zuhzr {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_ccgez {
71
+ .bank-card__label_zuhzr {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_ccgez .bank-card__label_ccgez,
76
- .bank-card__filled_ccgez .bank-card__label_ccgez {
75
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_ccgez .bank-card__label_ccgez,
82
- .bank-card__filled_ccgez .bank-card__label_ccgez {
81
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_ccgez:before {
86
+ .bank-card__focused_zuhzr:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_ccgez {
89
+ .bank-card__input_zuhzr {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_ccgez {
104
+ .bank-card__input_zuhzr {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_ccgez {
108
+ .bank-card__bankLogo_zuhzr {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_ccgez svg {
113
+ .bank-card__bankLogo_zuhzr svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_ccgez svg g {
118
+ .bank-card__bankLogo_zuhzr svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_ccgez {
121
+ .bank-card__brandLogo_zuhzr {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_ccgez svg {
126
+ .bank-card__brandLogo_zuhzr svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_ccgez {
130
+ .bank-card__usePhoto_zuhzr {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_ccgez svg {
148
+ .bank-card__usePhoto_zuhzr svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var Component = require('./Component.js');
5
4
  require('react');
6
5
  require('classnames');
7
6
  require('@alfalab/core-components-masked-input');
@@ -11,7 +10,6 @@ require('@alfalab/icons-logotype/MastercardLIcon');
11
10
  require('@alfalab/icons-logotype/MirXxlIcon');
12
11
  require('@alfalab/icons-logotype/VisaXxlIcon');
13
12
  require('./utils.js');
14
- var Component = require('./Component.js');
15
13
 
16
14
 
17
15
 
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
8
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_ccgez","aspectRatioContainer":"bank-card__aspectRatioContainer_ccgez","content":"bank-card__content_ccgez","label":"bank-card__label_ccgez","focused":"bank-card__focused_ccgez","filled":"bank-card__filled_ccgez","input":"bank-card__input_ccgez","bankLogo":"bank-card__bankLogo_ccgez","brandLogo":"bank-card__brandLogo_ccgez","usePhoto":"bank-card__usePhoto_ccgez"};
11
+ const styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qmown */
1
+ /* hash: c0u0h */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_ccgez {
26
+ .bank-card__component_zuhzr {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_ccgez {
46
+ .bank-card__aspectRatioContainer_zuhzr {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_ccgez {
50
+ .bank-card__content_zuhzr {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_ccgez {
63
+ .bank-card__label_zuhzr {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_ccgez {
71
+ .bank-card__label_zuhzr {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_ccgez .bank-card__label_ccgez,
76
- .bank-card__filled_ccgez .bank-card__label_ccgez {
75
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_ccgez .bank-card__label_ccgez,
82
- .bank-card__filled_ccgez .bank-card__label_ccgez {
81
+ .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
+ .bank-card__filled_zuhzr .bank-card__label_zuhzr {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_ccgez:before {
86
+ .bank-card__focused_zuhzr:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_ccgez {
89
+ .bank-card__input_zuhzr {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_ccgez {
104
+ .bank-card__input_zuhzr {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_ccgez {
108
+ .bank-card__bankLogo_zuhzr {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_ccgez svg {
113
+ .bank-card__bankLogo_zuhzr svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_ccgez svg g {
118
+ .bank-card__bankLogo_zuhzr svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_ccgez {
121
+ .bank-card__brandLogo_zuhzr {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_ccgez svg {
126
+ .bank-card__brandLogo_zuhzr svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_ccgez {
130
+ .bank-card__usePhoto_zuhzr {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_ccgez svg {
148
+ .bank-card__usePhoto_zuhzr svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/modern/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { BankCard } from './Component.js';
1
2
  import 'react';
2
3
  import 'classnames';
3
4
  import '@alfalab/core-components-masked-input/modern';
@@ -7,4 +8,3 @@ import '@alfalab/icons-logotype/MastercardLIcon';
7
8
  import '@alfalab/icons-logotype/MirXxlIcon';
8
9
  import '@alfalab/icons-logotype/VisaXxlIcon';
9
10
  import './utils.js';
10
- export { BankCard } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.7",
3
+ "version": "5.2.9",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,7 +18,7 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-masked-input": "^6.1.0",
21
+ "@alfalab/core-components-masked-input": "^6.1.2",
22
22
  "@alfalab/icons-glyph": "^2.71.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1"
package/utils.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  /**
6
4
  * Проверяет номер карты по алгоритму Луна
7
5
  *