@alfalab/core-components-circular-progress-bar 3.2.0 → 3.3.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 (13) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +3 -3
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +2 -2
  5. package/esm/Component.d.ts +4 -0
  6. package/esm/Component.js +3 -3
  7. package/esm/index.css +49 -49
  8. package/index.css +49 -49
  9. package/modern/Component.d.ts +4 -0
  10. package/modern/Component.js +5 -3
  11. package/modern/index.css +49 -49
  12. package/package.json +1 -1
  13. package/src/Component.tsx +9 -0
package/Component.d.ts CHANGED
@@ -98,6 +98,10 @@ type CircularProgressBarProps = {
98
98
  * Цвет заливки внутри круга
99
99
  */
100
100
  circleColor?: string;
101
+ /**
102
+ * Цвет желоба
103
+ */
104
+ strokeColor?: string;
101
105
  };
102
106
  /**
103
107
  * Компонент круглого прогресс бара.
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
16
+ var styles = {"component":"circular-progress-bar__component_5iq0y","bg-positive":"circular-progress-bar__bg-positive_5iq0y","bg-negative":"circular-progress-bar__bg-negative_5iq0y","svg":"circular-progress-bar__svg_5iq0y","title":"circular-progress-bar__title_5iq0y","subtitle":"circular-progress-bar__subtitle_5iq0y","labelWrapper":"circular-progress-bar__labelWrapper_5iq0y","label":"circular-progress-bar__label_5iq0y","typography":"circular-progress-bar__typography_5iq0y","xxl":"circular-progress-bar__xxl_5iq0y","xl":"circular-progress-bar__xl_5iq0y","l":"circular-progress-bar__l_5iq0y","m":"circular-progress-bar__m_5iq0y","s":"circular-progress-bar__s_5iq0y","xs":"circular-progress-bar__xs_5iq0y","backgroundCircle":"circular-progress-bar__backgroundCircle_5iq0y","progressCircle":"circular-progress-bar__progressCircle_5iq0y","positive":"circular-progress-bar__positive_5iq0y","negative":"circular-progress-bar__negative_5iq0y","stroke":"circular-progress-bar__stroke_5iq0y","iconWrapper":"circular-progress-bar__iconWrapper_5iq0y","icon-tertiary":"circular-progress-bar__icon-tertiary_5iq0y","icon-positive":"circular-progress-bar__icon-positive_5iq0y","icon-negative":"circular-progress-bar__icon-negative_5iq0y","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_5iq0y","icon-primary":"circular-progress-bar__icon-primary_5iq0y","icon-secondary":"circular-progress-bar__icon-secondary_5iq0y","icon":"circular-progress-bar__icon_5iq0y"};
17
17
  require('./index.css')
18
18
 
19
19
  /**
@@ -21,7 +21,7 @@ require('./index.css')
21
21
  */
22
22
  var CircularProgressBar = function (_a) {
23
23
  var _b, _c, _d;
24
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor;
24
+ var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
25
25
  var memorized = React.useMemo(function () {
26
26
  var strokeWidth = consts.STROKE[size];
27
27
  var maxProgress = 100;
@@ -75,7 +75,7 @@ var CircularProgressBar = function (_a) {
75
75
  React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
76
76
  React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[size], (_c = {},
77
77
  _c[styles.stroke] = !stroke,
78
- _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
78
+ _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
79
79
  React__default.default.createElement("circle", { className: cn__default.default(styles.progressCircle, styles[view], styles[size]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
80
80
  ? -memorized.strokeDashoffset
81
81
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
package/cssm/Component.d.ts CHANGED
@@ -98,6 +98,10 @@ type CircularProgressBarProps = {
98
98
  * Цвет заливки внутри круга
99
99
  */
100
100
  circleColor?: string;
101
+ /**
102
+ * Цвет желоба
103
+ */
104
+ strokeColor?: string;
101
105
  };
102
106
  /**
103
107
  * Компонент круглого прогресс бара.
package/cssm/Component.js CHANGED
@@ -20,7 +20,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
20
20
  */
21
21
  var CircularProgressBar = function (_a) {
22
22
  var _b, _c, _d;
23
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor;
23
+ var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
24
24
  var memorized = React.useMemo(function () {
25
25
  var strokeWidth = consts.STROKE[size];
26
26
  var maxProgress = 100;
@@ -74,7 +74,7 @@ var CircularProgressBar = function (_a) {
74
74
  React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles__default.default.svg, xmlns: 'http://www.w3.org/2000/svg' },
75
75
  React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[size], (_c = {},
76
76
  _c[styles__default.default.stroke] = !stroke,
77
- _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
77
+ _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
78
78
  React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[size]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
79
79
  ? -memorized.strokeDashoffset
80
80
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
package/esm/Component.d.ts CHANGED
@@ -98,6 +98,10 @@ type CircularProgressBarProps = {
98
98
  * Цвет заливки внутри круга
99
99
  */
100
100
  circleColor?: string;
101
+ /**
102
+ * Цвет желоба
103
+ */
104
+ strokeColor?: string;
101
105
  };
102
106
  /**
103
107
  * Компонент круглого прогресс бара.
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { Typography } from '@alfalab/core-components-typography/esm';
5
5
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
6
6
 
7
- var styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
7
+ var styles = {"component":"circular-progress-bar__component_5iq0y","bg-positive":"circular-progress-bar__bg-positive_5iq0y","bg-negative":"circular-progress-bar__bg-negative_5iq0y","svg":"circular-progress-bar__svg_5iq0y","title":"circular-progress-bar__title_5iq0y","subtitle":"circular-progress-bar__subtitle_5iq0y","labelWrapper":"circular-progress-bar__labelWrapper_5iq0y","label":"circular-progress-bar__label_5iq0y","typography":"circular-progress-bar__typography_5iq0y","xxl":"circular-progress-bar__xxl_5iq0y","xl":"circular-progress-bar__xl_5iq0y","l":"circular-progress-bar__l_5iq0y","m":"circular-progress-bar__m_5iq0y","s":"circular-progress-bar__s_5iq0y","xs":"circular-progress-bar__xs_5iq0y","backgroundCircle":"circular-progress-bar__backgroundCircle_5iq0y","progressCircle":"circular-progress-bar__progressCircle_5iq0y","positive":"circular-progress-bar__positive_5iq0y","negative":"circular-progress-bar__negative_5iq0y","stroke":"circular-progress-bar__stroke_5iq0y","iconWrapper":"circular-progress-bar__iconWrapper_5iq0y","icon-tertiary":"circular-progress-bar__icon-tertiary_5iq0y","icon-positive":"circular-progress-bar__icon-positive_5iq0y","icon-negative":"circular-progress-bar__icon-negative_5iq0y","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_5iq0y","icon-primary":"circular-progress-bar__icon-primary_5iq0y","icon-secondary":"circular-progress-bar__icon-secondary_5iq0y","icon":"circular-progress-bar__icon_5iq0y"};
8
8
  require('./index.css')
9
9
 
10
10
  /**
@@ -12,7 +12,7 @@ require('./index.css')
12
12
  */
13
13
  var CircularProgressBar = function (_a) {
14
14
  var _b, _c, _d;
15
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor;
15
+ var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
16
16
  var memorized = useMemo(function () {
17
17
  var strokeWidth = STROKE[size];
18
18
  var maxProgress = 100;
@@ -66,7 +66,7 @@ var CircularProgressBar = function (_a) {
66
66
  React.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
67
67
  React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], (_c = {},
68
68
  _c[styles.stroke] = !stroke,
69
- _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
69
+ _c)), style: __assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
70
70
  React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: __assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
71
71
  ? -memorized.strokeDashoffset
72
72
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mxnd9 */
1
+ /* hash: vkz5w */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -37,135 +37,135 @@
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_kekau {
40
+ } .circular-progress-bar__component_5iq0y {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
46
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-positive_5iq0y {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
48
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-negative_5iq0y {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_kekau {
50
+ } .circular-progress-bar__svg_5iq0y {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_kekau,
54
- .circular-progress-bar__subtitle_kekau {
53
+ } .circular-progress-bar__title_5iq0y,
54
+ .circular-progress-bar__subtitle_5iq0y {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_kekau {
60
+ } .circular-progress-bar__subtitle_5iq0y {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_kekau {
62
+ } .circular-progress-bar__labelWrapper_5iq0y {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
69
+ } .circular-progress-bar__labelWrapper_5iq0y.circular-progress-bar__label_5iq0y {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_kekau {
73
+ } .circular-progress-bar__typography_5iq0y {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_kekau {
77
+ } .circular-progress-bar__xxl_5iq0y {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
80
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
82
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__title_5iq0y {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_kekau {
84
+ } .circular-progress-bar__xl_5iq0y {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
87
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
89
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__title_5iq0y {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_kekau {
91
+ } .circular-progress-bar__l_5iq0y {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
94
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
96
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__title_5iq0y {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_kekau {
98
+ } .circular-progress-bar__m_5iq0y {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
101
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
103
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__title_5iq0y {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_kekau {
106
+ } .circular-progress-bar__s_5iq0y {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
109
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
111
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__title_5iq0y {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_kekau {
114
+ } .circular-progress-bar__xs_5iq0y {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
117
+ } .circular-progress-bar__xs_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_kekau,
120
- .circular-progress-bar__progressCircle_kekau {
119
+ } .circular-progress-bar__backgroundCircle_5iq0y,
120
+ .circular-progress-bar__progressCircle_5iq0y {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_kekau {
124
+ } .circular-progress-bar__positive_5iq0y {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_kekau {
126
+ } .circular-progress-bar__negative_5iq0y {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_kekau {
128
+ } .circular-progress-bar__backgroundCircle_5iq0y {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
130
+ } .circular-progress-bar__backgroundCircle_5iq0y.circular-progress-bar__stroke_5iq0y {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_kekau {
132
+ } .circular-progress-bar__progressCircle_5iq0y {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_kekau {
134
+ } .circular-progress-bar__iconWrapper_5iq0y {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
138
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xxl_5iq0y {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
141
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xl_5iq0y {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
144
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__l_5iq0y {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
147
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__m_5iq0y {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
150
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__s_5iq0y {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
153
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xs_5iq0y {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
156
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-tertiary_5iq0y {
157
157
  color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
158
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-positive_5iq0y {
159
159
  color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
160
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-negative_5iq0y {
161
161
  color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
162
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary-inverted_5iq0y {
163
163
  color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
164
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary_5iq0y {
165
165
  color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
166
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-secondary_5iq0y {
167
167
  color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_kekau {
168
+ } .circular-progress-bar__icon_5iq0y {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mxnd9 */
1
+ /* hash: vkz5w */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -37,135 +37,135 @@
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_kekau {
40
+ } .circular-progress-bar__component_5iq0y {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
46
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-positive_5iq0y {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
48
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-negative_5iq0y {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_kekau {
50
+ } .circular-progress-bar__svg_5iq0y {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_kekau,
54
- .circular-progress-bar__subtitle_kekau {
53
+ } .circular-progress-bar__title_5iq0y,
54
+ .circular-progress-bar__subtitle_5iq0y {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_kekau {
60
+ } .circular-progress-bar__subtitle_5iq0y {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_kekau {
62
+ } .circular-progress-bar__labelWrapper_5iq0y {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
69
+ } .circular-progress-bar__labelWrapper_5iq0y.circular-progress-bar__label_5iq0y {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_kekau {
73
+ } .circular-progress-bar__typography_5iq0y {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_kekau {
77
+ } .circular-progress-bar__xxl_5iq0y {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
80
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
82
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__title_5iq0y {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_kekau {
84
+ } .circular-progress-bar__xl_5iq0y {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
87
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
89
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__title_5iq0y {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_kekau {
91
+ } .circular-progress-bar__l_5iq0y {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
94
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
96
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__title_5iq0y {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_kekau {
98
+ } .circular-progress-bar__m_5iq0y {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
101
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
103
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__title_5iq0y {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_kekau {
106
+ } .circular-progress-bar__s_5iq0y {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
109
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
111
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__title_5iq0y {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_kekau {
114
+ } .circular-progress-bar__xs_5iq0y {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
117
+ } .circular-progress-bar__xs_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_kekau,
120
- .circular-progress-bar__progressCircle_kekau {
119
+ } .circular-progress-bar__backgroundCircle_5iq0y,
120
+ .circular-progress-bar__progressCircle_5iq0y {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_kekau {
124
+ } .circular-progress-bar__positive_5iq0y {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_kekau {
126
+ } .circular-progress-bar__negative_5iq0y {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_kekau {
128
+ } .circular-progress-bar__backgroundCircle_5iq0y {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
130
+ } .circular-progress-bar__backgroundCircle_5iq0y.circular-progress-bar__stroke_5iq0y {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_kekau {
132
+ } .circular-progress-bar__progressCircle_5iq0y {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_kekau {
134
+ } .circular-progress-bar__iconWrapper_5iq0y {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
138
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xxl_5iq0y {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
141
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xl_5iq0y {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
144
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__l_5iq0y {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
147
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__m_5iq0y {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
150
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__s_5iq0y {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
153
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xs_5iq0y {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
156
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-tertiary_5iq0y {
157
157
  color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
158
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-positive_5iq0y {
159
159
  color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
160
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-negative_5iq0y {
161
161
  color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
162
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary-inverted_5iq0y {
163
163
  color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
164
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary_5iq0y {
165
165
  color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
166
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-secondary_5iq0y {
167
167
  color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_kekau {
168
+ } .circular-progress-bar__icon_5iq0y {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/modern/Component.d.ts CHANGED
@@ -98,6 +98,10 @@ type CircularProgressBarProps = {
98
98
  * Цвет заливки внутри круга
99
99
  */
100
100
  circleColor?: string;
101
+ /**
102
+ * Цвет желоба
103
+ */
104
+ strokeColor?: string;
101
105
  };
102
106
  /**
103
107
  * Компонент круглого прогресс бара.
package/modern/Component.js CHANGED
@@ -3,13 +3,13 @@ import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
 
6
- const styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
6
+ const styles = {"component":"circular-progress-bar__component_5iq0y","bg-positive":"circular-progress-bar__bg-positive_5iq0y","bg-negative":"circular-progress-bar__bg-negative_5iq0y","svg":"circular-progress-bar__svg_5iq0y","title":"circular-progress-bar__title_5iq0y","subtitle":"circular-progress-bar__subtitle_5iq0y","labelWrapper":"circular-progress-bar__labelWrapper_5iq0y","label":"circular-progress-bar__label_5iq0y","typography":"circular-progress-bar__typography_5iq0y","xxl":"circular-progress-bar__xxl_5iq0y","xl":"circular-progress-bar__xl_5iq0y","l":"circular-progress-bar__l_5iq0y","m":"circular-progress-bar__m_5iq0y","s":"circular-progress-bar__s_5iq0y","xs":"circular-progress-bar__xs_5iq0y","backgroundCircle":"circular-progress-bar__backgroundCircle_5iq0y","progressCircle":"circular-progress-bar__progressCircle_5iq0y","positive":"circular-progress-bar__positive_5iq0y","negative":"circular-progress-bar__negative_5iq0y","stroke":"circular-progress-bar__stroke_5iq0y","iconWrapper":"circular-progress-bar__iconWrapper_5iq0y","icon-tertiary":"circular-progress-bar__icon-tertiary_5iq0y","icon-positive":"circular-progress-bar__icon-positive_5iq0y","icon-negative":"circular-progress-bar__icon-negative_5iq0y","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_5iq0y","icon-primary":"circular-progress-bar__icon-primary_5iq0y","icon-secondary":"circular-progress-bar__icon-secondary_5iq0y","icon":"circular-progress-bar__icon_5iq0y"};
7
7
  require('./index.css')
8
8
 
9
9
  /**
10
10
  * Компонент круглого прогресс бара.
11
11
  */
12
- const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, }) => {
12
+ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
13
13
  const memorized = useMemo(() => {
14
14
  const strokeWidth = STROKE[size];
15
15
  const maxProgress = 100;
@@ -63,7 +63,9 @@ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className,
63
63
  React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
64
64
  React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], {
65
65
  [styles.stroke]: !stroke,
66
- }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
66
+ }), style: {
67
+ ...(strokeColor && stroke && { stroke: strokeColor }),
68
+ }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
67
69
  React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: {
68
70
  ...(progressStrokeColor && { stroke: progressStrokeColor }),
69
71
  }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mxnd9 */
1
+ /* hash: vkz5w */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -37,135 +37,135 @@
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_kekau {
40
+ } .circular-progress-bar__component_5iq0y {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
46
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-positive_5iq0y {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
48
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-negative_5iq0y {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_kekau {
50
+ } .circular-progress-bar__svg_5iq0y {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_kekau,
54
- .circular-progress-bar__subtitle_kekau {
53
+ } .circular-progress-bar__title_5iq0y,
54
+ .circular-progress-bar__subtitle_5iq0y {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_kekau {
60
+ } .circular-progress-bar__subtitle_5iq0y {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_kekau {
62
+ } .circular-progress-bar__labelWrapper_5iq0y {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
69
+ } .circular-progress-bar__labelWrapper_5iq0y.circular-progress-bar__label_5iq0y {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_kekau {
73
+ } .circular-progress-bar__typography_5iq0y {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_kekau {
77
+ } .circular-progress-bar__xxl_5iq0y {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
80
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
82
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__title_5iq0y {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_kekau {
84
+ } .circular-progress-bar__xl_5iq0y {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
87
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
89
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__title_5iq0y {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_kekau {
91
+ } .circular-progress-bar__l_5iq0y {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
94
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
96
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__title_5iq0y {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_kekau {
98
+ } .circular-progress-bar__m_5iq0y {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
101
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
103
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__title_5iq0y {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_kekau {
106
+ } .circular-progress-bar__s_5iq0y {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
109
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
111
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__title_5iq0y {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_kekau {
114
+ } .circular-progress-bar__xs_5iq0y {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
117
+ } .circular-progress-bar__xs_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_kekau,
120
- .circular-progress-bar__progressCircle_kekau {
119
+ } .circular-progress-bar__backgroundCircle_5iq0y,
120
+ .circular-progress-bar__progressCircle_5iq0y {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_kekau {
124
+ } .circular-progress-bar__positive_5iq0y {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_kekau {
126
+ } .circular-progress-bar__negative_5iq0y {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_kekau {
128
+ } .circular-progress-bar__backgroundCircle_5iq0y {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
130
+ } .circular-progress-bar__backgroundCircle_5iq0y.circular-progress-bar__stroke_5iq0y {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_kekau {
132
+ } .circular-progress-bar__progressCircle_5iq0y {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_kekau {
134
+ } .circular-progress-bar__iconWrapper_5iq0y {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
138
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xxl_5iq0y {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
141
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xl_5iq0y {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
144
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__l_5iq0y {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
147
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__m_5iq0y {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
150
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__s_5iq0y {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
153
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xs_5iq0y {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
156
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-tertiary_5iq0y {
157
157
  color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
158
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-positive_5iq0y {
159
159
  color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
160
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-negative_5iq0y {
161
161
  color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
162
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary-inverted_5iq0y {
163
163
  color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
164
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary_5iq0y {
165
165
  color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
166
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-secondary_5iq0y {
167
167
  color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_kekau {
168
+ } .circular-progress-bar__icon_5iq0y {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/Component.tsx CHANGED
@@ -121,6 +121,11 @@ export type CircularProgressBarProps = {
121
121
  * Цвет заливки внутри круга
122
122
  */
123
123
  circleColor?: string;
124
+
125
+ /**
126
+ * Цвет желоба
127
+ */
128
+ strokeColor?: string;
124
129
  };
125
130
 
126
131
  /**
@@ -148,6 +153,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
148
153
  children,
149
154
  progressStrokeColor,
150
155
  circleColor,
156
+ strokeColor,
151
157
  }) => {
152
158
  const memorized = useMemo(() => {
153
159
  const strokeWidth = STROKE[size];
@@ -275,6 +281,9 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
275
281
  className={cn(styles.backgroundCircle, styles[size], {
276
282
  [styles.stroke]: !stroke,
277
283
  })}
284
+ style={{
285
+ ...(strokeColor && stroke && { stroke: strokeColor }),
286
+ }}
278
287
  cx={memorized.center}
279
288
  cy={memorized.center}
280
289
  r={memorized.radius}