@alfalab/core-components-circular-progress-bar 3.0.8 → 3.0.10

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.
package/Component.js CHANGED
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var tslib = require('tslib');
3
4
  var React = require('react');
4
5
  var cn = require('classnames');
5
6
  var coreComponentsTypography = require('@alfalab/core-components-typography');
@@ -9,34 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
9
10
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
10
11
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
11
12
 
12
- /******************************************************************************
13
- Copyright (c) Microsoft Corporation.
14
-
15
- Permission to use, copy, modify, and/or distribute this software for any
16
- purpose with or without fee is hereby granted.
17
-
18
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
19
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
20
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
21
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
22
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
23
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
24
- PERFORMANCE OF THIS SOFTWARE.
25
- ***************************************************************************** */
26
- var __assign = function () {
27
- __assign = Object.assign || function __assign(t) {
28
- for (var s, i = 1, n = arguments.length; i < n; i++) {
29
- s = arguments[i];
30
- for (var p in s)
31
- if (Object.prototype.hasOwnProperty.call(s, p))
32
- t[p] = s[p];
33
- }
34
- return t;
35
- };
36
- return __assign.apply(this, arguments);
37
- };
38
-
39
- var styles = {"component":"circular-progress-bar__component_1brjj","svg":"circular-progress-bar__svg_1brjj","title":"circular-progress-bar__title_1brjj","subtitle":"circular-progress-bar__subtitle_1brjj","labelWrapper":"circular-progress-bar__labelWrapper_1brjj","label":"circular-progress-bar__label_1brjj","typography":"circular-progress-bar__typography_1brjj","xxl":"circular-progress-bar__xxl_1brjj","xl":"circular-progress-bar__xl_1brjj","l":"circular-progress-bar__l_1brjj","m":"circular-progress-bar__m_1brjj","s":"circular-progress-bar__s_1brjj","xs":"circular-progress-bar__xs_1brjj","backgroundCircle":"circular-progress-bar__backgroundCircle_1brjj","progressCircle":"circular-progress-bar__progressCircle_1brjj","positive":"circular-progress-bar__positive_1brjj","negative":"circular-progress-bar__negative_1brjj","stroke":"circular-progress-bar__stroke_1brjj","bg-positive":"circular-progress-bar__bg-positive_1brjj","bg-negative":"circular-progress-bar__bg-negative_1brjj","iconWrapper":"circular-progress-bar__iconWrapper_1brjj","icon-tertiary":"circular-progress-bar__icon-tertiary_1brjj","icon-positive":"circular-progress-bar__icon-positive_1brjj","icon-negative":"circular-progress-bar__icon-negative_1brjj","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1brjj","icon-primary":"circular-progress-bar__icon-primary_1brjj","icon-secondary":"circular-progress-bar__icon-secondary_1brjj","icon":"circular-progress-bar__icon_1brjj"};
13
+ var styles = {"component":"circular-progress-bar__component_b6h52","svg":"circular-progress-bar__svg_b6h52","title":"circular-progress-bar__title_b6h52","subtitle":"circular-progress-bar__subtitle_b6h52","labelWrapper":"circular-progress-bar__labelWrapper_b6h52","label":"circular-progress-bar__label_b6h52","typography":"circular-progress-bar__typography_b6h52","xxl":"circular-progress-bar__xxl_b6h52","xl":"circular-progress-bar__xl_b6h52","l":"circular-progress-bar__l_b6h52","m":"circular-progress-bar__m_b6h52","s":"circular-progress-bar__s_b6h52","xs":"circular-progress-bar__xs_b6h52","backgroundCircle":"circular-progress-bar__backgroundCircle_b6h52","progressCircle":"circular-progress-bar__progressCircle_b6h52","positive":"circular-progress-bar__positive_b6h52","negative":"circular-progress-bar__negative_b6h52","stroke":"circular-progress-bar__stroke_b6h52","bg-positive":"circular-progress-bar__bg-positive_b6h52","bg-negative":"circular-progress-bar__bg-negative_b6h52","iconWrapper":"circular-progress-bar__iconWrapper_b6h52","icon-tertiary":"circular-progress-bar__icon-tertiary_b6h52","icon-positive":"circular-progress-bar__icon-positive_b6h52","icon-negative":"circular-progress-bar__icon-negative_b6h52","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_b6h52","icon-primary":"circular-progress-bar__icon-primary_b6h52","icon-secondary":"circular-progress-bar__icon-secondary_b6h52","icon":"circular-progress-bar__icon_b6h52"};
40
14
  require('./index.css')
41
15
 
42
16
  var SIZES = {
@@ -121,7 +95,7 @@ var CircularProgressBar = function (_a) {
121
95
  SIZES[size] > 24 && renderTitle(),
122
96
  SIZES[size] > 64 && renderSubTitle()));
123
97
  };
124
- return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
98
+ return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], className), style: tslib.__assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
125
99
  React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
126
100
  React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[size], (_b = {},
127
101
  _b[styles.stroke] = !stroke,
package/cssm/Component.js CHANGED
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var tslib = require('tslib');
3
4
  var React = require('react');
4
5
  var cn = require('classnames');
5
6
  var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
@@ -11,33 +12,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
11
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
12
13
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
13
14
 
14
- /******************************************************************************
15
- Copyright (c) Microsoft Corporation.
16
-
17
- Permission to use, copy, modify, and/or distribute this software for any
18
- purpose with or without fee is hereby granted.
19
-
20
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
21
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
22
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
23
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
24
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
25
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
26
- PERFORMANCE OF THIS SOFTWARE.
27
- ***************************************************************************** */
28
- var __assign = function () {
29
- __assign = Object.assign || function __assign(t) {
30
- for (var s, i = 1, n = arguments.length; i < n; i++) {
31
- s = arguments[i];
32
- for (var p in s)
33
- if (Object.prototype.hasOwnProperty.call(s, p))
34
- t[p] = s[p];
35
- }
36
- return t;
37
- };
38
- return __assign.apply(this, arguments);
39
- };
40
-
41
15
  var SIZES = {
42
16
  xs: 24,
43
17
  s: 48,
@@ -120,7 +94,7 @@ var CircularProgressBar = function (_a) {
120
94
  SIZES[size] > 24 && renderTitle(),
121
95
  SIZES[size] > 64 && renderSubTitle()));
122
96
  };
123
- return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
97
+ return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], className), style: tslib.__assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
124
98
  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' },
125
99
  React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[size], (_b = {},
126
100
  _b[styles__default.default.stroke] = !stroke,
package/cssm/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Component = require('./Component.js');
4
+ require('tslib');
4
5
  require('react');
5
6
  require('classnames');
6
7
  require('@alfalab/core-components-typography/cssm');
@@ -1,27 +1,30 @@
1
1
  :root {
2
- --color-light-bg-tertiary: #e7e9eb;
2
+ } /* deprecated */ :root {
3
+ --color-light-border-primary: #dbdee1;
3
4
  --color-light-graphic-negative: #f15045;
4
5
  --color-light-graphic-positive: #2fc26e;
5
6
  --color-light-graphic-primary: #0b1f35;
6
7
  --color-light-graphic-primary-inverted: #fff;
7
8
  --color-light-graphic-secondary: #6d7986;
8
9
  --color-light-graphic-tertiary: #b6bcc3;
9
- }
10
- :root {
10
+ } :root {
11
+ } :root {
12
+ } :root {
11
13
 
12
14
  /* Hard */
13
15
 
14
16
  /* Up */
15
17
 
16
18
  /* Hard up */
17
- }
18
- :root {
19
+ } :root {
20
+ } :root {
21
+ } :root {
19
22
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
20
23
  sans-serif;
21
- }
22
- :root {
23
- /* bg */
24
- --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
24
+ } :root {
25
+ } :root {
26
+ /* stroke */
27
+ --circular-progress-bar-stroke-color: var(--color-light-border-primary);
25
28
 
26
29
  /* positive */
27
30
  --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
@@ -32,180 +35,134 @@
32
35
  /* theme */
33
36
  --circular-progress-bar-font-family: var(--font-family-system);
34
37
  --circular-progress-bar-font-weight: 600;
35
- }
36
- .component {
38
+ } .component {
37
39
  position: relative;
38
40
  display: flex;
39
41
  justify-content: center;
40
42
  align-items: center;
41
- }
42
- .svg {
43
+ } .svg {
43
44
  display: block;
44
45
  width: 100%;
45
- }
46
- .title,
46
+ } .title,
47
47
  .subtitle {
48
48
  overflow: hidden;
49
49
  word-break: break-word;
50
50
  white-space: nowrap;
51
51
  text-overflow: ellipsis;
52
52
  margin: 0 6px;
53
- }
54
- .subtitle {
53
+ } .subtitle {
55
54
  max-height: 40px;
56
- }
57
- .labelWrapper {
55
+ } .labelWrapper {
58
56
  text-align: center;
59
57
  position: absolute;
60
58
  top: 50%;
61
59
  left: 50%;
62
60
  width: 100%;
63
61
  transform: translate(-50%, -50%)
64
- }
65
- .labelWrapper.label {
62
+ } .labelWrapper.label {
66
63
  display: flex;
67
64
  align-items: center;
68
65
  justify-content: center;
69
- }
70
- .typography {
66
+ } .typography {
71
67
  font-feature-settings: 'ss01';
72
68
  font-weight: var(--circular-progress-bar-font-weight);
73
69
  font-family: var(--circular-progress-bar-font-family);
74
- }
75
- .xxl {
70
+ } .xxl {
76
71
  width: 144px;
77
72
  height: 144px
78
- }
79
- .xxl .labelWrapper {
73
+ } .xxl .labelWrapper {
80
74
  max-width: 128px;
81
- }
82
- .xxl .title {
75
+ } .xxl .title {
83
76
  max-height: 32px;
84
- }
85
- .xl {
77
+ } .xl {
86
78
  width: 128px;
87
79
  height: 128px
88
- }
89
- .xl .labelWrapper {
80
+ } .xl .labelWrapper {
90
81
  max-width: 108px;
91
- }
92
- .xl .title {
82
+ } .xl .title {
93
83
  max-height: 32px;
94
- }
95
- .l {
84
+ } .l {
96
85
  width: 80px;
97
86
  height: 80px
98
- }
99
- .l .labelWrapper {
87
+ } .l .labelWrapper {
100
88
  max-width: 64px;
101
- }
102
- .l .title {
89
+ } .l .title {
103
90
  max-height: 24px;
104
- }
105
- .m {
91
+ } .m {
106
92
  width: 64px;
107
93
  height: 64px
108
- }
109
- .m .labelWrapper {
94
+ } .m .labelWrapper {
110
95
  max-width: 48px;
111
- }
112
- .m .title {
96
+ } .m .title {
113
97
  max-height: 16px;
114
98
  margin: 0;
115
- }
116
- .s {
99
+ } .s {
117
100
  width: 48px;
118
101
  height: 48px
119
- }
120
- .s .labelWrapper {
102
+ } .s .labelWrapper {
121
103
  max-width: 40px;
122
- }
123
- .s .title {
104
+ } .s .title {
124
105
  max-height: 16px;
125
106
  margin: 0;
126
- }
127
- .xs {
107
+ } .xs {
128
108
  width: 24px;
129
109
  height: 24px
130
- }
131
- .xs .labelWrapper {
110
+ } .xs .labelWrapper {
132
111
  max-width: 24px;
133
- }
134
- .backgroundCircle,
112
+ } .backgroundCircle,
135
113
  .progressCircle {
136
114
  width: 100%;
137
115
  height: 100%;
138
116
  fill: transparent;
139
- }
140
- .positive {
117
+ } .positive {
141
118
  stroke: var(--circular-progress-bar-positive-color);
142
- }
143
- .negative {
119
+ } .negative {
144
120
  stroke: var(--circular-progress-bar-negative-color);
145
- }
146
- .backgroundCircle {
147
- stroke: var(--circular-progress-bar-bg-color)
148
- }
149
- .backgroundCircle.stroke {
121
+ } .backgroundCircle {
122
+ stroke: var(--circular-progress-bar-stroke-color)
123
+ } .backgroundCircle.stroke {
150
124
  stroke: transparent;
151
- }
152
- .progressCircle {
125
+ } .progressCircle {
153
126
  stroke-linecap: round
154
- }
155
- .progressCircle.bg-positive {
127
+ } .progressCircle.bg-positive {
156
128
  fill: var(--circular-progress-bar-positive-color);
157
- }
158
- .progressCircle.bg-negative {
129
+ } .progressCircle.bg-negative {
159
130
  fill: var(--circular-progress-bar-negative-color);
160
- }
161
- .iconWrapper {
131
+ } .iconWrapper {
162
132
  display: flex;
163
133
  align-items: center;
164
134
  justify-content: center
165
- }
166
- .iconWrapper.xxl {
135
+ } .iconWrapper.xxl {
167
136
  max-width: 64px;
168
137
  max-height: 64px;
169
- }
170
- .iconWrapper.xl {
138
+ } .iconWrapper.xl {
171
139
  max-width: 64px;
172
140
  max-height: 64px;
173
- }
174
- .iconWrapper.l {
141
+ } .iconWrapper.l {
175
142
  max-width: 48px;
176
143
  max-height: 48px;
177
- }
178
- .iconWrapper.m {
144
+ } .iconWrapper.m {
179
145
  max-width: 36px;
180
146
  max-height: 36px;
181
- }
182
- .iconWrapper.s {
147
+ } .iconWrapper.s {
183
148
  max-width: 24px;
184
149
  max-height: 24px;
185
- }
186
- .iconWrapper.xs {
150
+ } .iconWrapper.xs {
187
151
  max-width: 16px;
188
152
  max-height: 16px;
189
- }
190
- .iconWrapper.icon-tertiary {
153
+ } .iconWrapper.icon-tertiary {
191
154
  color: var(--color-light-graphic-tertiary);
192
- }
193
- .iconWrapper.icon-positive {
155
+ } .iconWrapper.icon-positive {
194
156
  color: var(--color-light-graphic-positive);
195
- }
196
- .iconWrapper.icon-negative {
157
+ } .iconWrapper.icon-negative {
197
158
  color: var(--color-light-graphic-negative);
198
- }
199
- .iconWrapper.icon-primary-inverted {
159
+ } .iconWrapper.icon-primary-inverted {
200
160
  color: var(--color-light-graphic-primary-inverted);
201
- }
202
- .iconWrapper.icon-primary {
161
+ } .iconWrapper.icon-primary {
203
162
  color: var(--color-light-graphic-primary);
204
- }
205
- .iconWrapper.icon-secondary {
163
+ } .iconWrapper.icon-secondary {
206
164
  color: var(--color-light-graphic-secondary);
207
- }
208
- .icon {
165
+ } .icon {
209
166
  width: 100%;
210
167
  height: 100%;
211
168
  }
package/esm/Component.js CHANGED
@@ -1,35 +1,9 @@
1
+ import { __assign } from 'tslib';
1
2
  import React, { useMemo } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { Typography } from '@alfalab/core-components-typography/esm';
4
5
 
5
- /******************************************************************************
6
- Copyright (c) Microsoft Corporation.
7
-
8
- Permission to use, copy, modify, and/or distribute this software for any
9
- purpose with or without fee is hereby granted.
10
-
11
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
12
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
13
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
14
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
15
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
16
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
17
- PERFORMANCE OF THIS SOFTWARE.
18
- ***************************************************************************** */
19
- var __assign = function () {
20
- __assign = Object.assign || function __assign(t) {
21
- for (var s, i = 1, n = arguments.length; i < n; i++) {
22
- s = arguments[i];
23
- for (var p in s)
24
- if (Object.prototype.hasOwnProperty.call(s, p))
25
- t[p] = s[p];
26
- }
27
- return t;
28
- };
29
- return __assign.apply(this, arguments);
30
- };
31
-
32
- var styles = {"component":"circular-progress-bar__component_1brjj","svg":"circular-progress-bar__svg_1brjj","title":"circular-progress-bar__title_1brjj","subtitle":"circular-progress-bar__subtitle_1brjj","labelWrapper":"circular-progress-bar__labelWrapper_1brjj","label":"circular-progress-bar__label_1brjj","typography":"circular-progress-bar__typography_1brjj","xxl":"circular-progress-bar__xxl_1brjj","xl":"circular-progress-bar__xl_1brjj","l":"circular-progress-bar__l_1brjj","m":"circular-progress-bar__m_1brjj","s":"circular-progress-bar__s_1brjj","xs":"circular-progress-bar__xs_1brjj","backgroundCircle":"circular-progress-bar__backgroundCircle_1brjj","progressCircle":"circular-progress-bar__progressCircle_1brjj","positive":"circular-progress-bar__positive_1brjj","negative":"circular-progress-bar__negative_1brjj","stroke":"circular-progress-bar__stroke_1brjj","bg-positive":"circular-progress-bar__bg-positive_1brjj","bg-negative":"circular-progress-bar__bg-negative_1brjj","iconWrapper":"circular-progress-bar__iconWrapper_1brjj","icon-tertiary":"circular-progress-bar__icon-tertiary_1brjj","icon-positive":"circular-progress-bar__icon-positive_1brjj","icon-negative":"circular-progress-bar__icon-negative_1brjj","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1brjj","icon-primary":"circular-progress-bar__icon-primary_1brjj","icon-secondary":"circular-progress-bar__icon-secondary_1brjj","icon":"circular-progress-bar__icon_1brjj"};
6
+ var styles = {"component":"circular-progress-bar__component_b6h52","svg":"circular-progress-bar__svg_b6h52","title":"circular-progress-bar__title_b6h52","subtitle":"circular-progress-bar__subtitle_b6h52","labelWrapper":"circular-progress-bar__labelWrapper_b6h52","label":"circular-progress-bar__label_b6h52","typography":"circular-progress-bar__typography_b6h52","xxl":"circular-progress-bar__xxl_b6h52","xl":"circular-progress-bar__xl_b6h52","l":"circular-progress-bar__l_b6h52","m":"circular-progress-bar__m_b6h52","s":"circular-progress-bar__s_b6h52","xs":"circular-progress-bar__xs_b6h52","backgroundCircle":"circular-progress-bar__backgroundCircle_b6h52","progressCircle":"circular-progress-bar__progressCircle_b6h52","positive":"circular-progress-bar__positive_b6h52","negative":"circular-progress-bar__negative_b6h52","stroke":"circular-progress-bar__stroke_b6h52","bg-positive":"circular-progress-bar__bg-positive_b6h52","bg-negative":"circular-progress-bar__bg-negative_b6h52","iconWrapper":"circular-progress-bar__iconWrapper_b6h52","icon-tertiary":"circular-progress-bar__icon-tertiary_b6h52","icon-positive":"circular-progress-bar__icon-positive_b6h52","icon-negative":"circular-progress-bar__icon-negative_b6h52","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_b6h52","icon-primary":"circular-progress-bar__icon-primary_b6h52","icon-secondary":"circular-progress-bar__icon-secondary_b6h52","icon":"circular-progress-bar__icon_b6h52"};
33
7
  require('./index.css')
34
8
 
35
9
  var SIZES = {
package/esm/index.css CHANGED
@@ -1,28 +1,31 @@
1
- /* hash: 1tbp0 */
1
+ /* hash: 1vvwv */
2
2
  :root {
3
- --color-light-bg-tertiary: #e7e9eb;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-primary: #dbdee1;
4
5
  --color-light-graphic-negative: #f15045;
5
6
  --color-light-graphic-positive: #2fc26e;
6
7
  --color-light-graphic-primary: #0b1f35;
7
8
  --color-light-graphic-primary-inverted: #fff;
8
9
  --color-light-graphic-secondary: #6d7986;
9
10
  --color-light-graphic-tertiary: #b6bcc3;
10
- }
11
- :root {
11
+ } :root {
12
+ } :root {
13
+ } :root {
12
14
 
13
15
  /* Hard */
14
16
 
15
17
  /* Up */
16
18
 
17
19
  /* Hard up */
18
- }
19
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
20
23
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
21
24
  sans-serif;
22
- }
23
- :root {
24
- /* bg */
25
- --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
25
+ } :root {
26
+ } :root {
27
+ /* stroke */
28
+ --circular-progress-bar-stroke-color: var(--color-light-border-primary);
26
29
 
27
30
  /* positive */
28
31
  --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
@@ -33,180 +36,134 @@
33
36
  /* theme */
34
37
  --circular-progress-bar-font-family: var(--font-family-system);
35
38
  --circular-progress-bar-font-weight: 600;
36
- }
37
- .circular-progress-bar__component_1brjj {
39
+ } .circular-progress-bar__component_b6h52 {
38
40
  position: relative;
39
41
  display: flex;
40
42
  justify-content: center;
41
43
  align-items: center;
42
- }
43
- .circular-progress-bar__svg_1brjj {
44
+ } .circular-progress-bar__svg_b6h52 {
44
45
  display: block;
45
46
  width: 100%;
46
- }
47
- .circular-progress-bar__title_1brjj,
48
- .circular-progress-bar__subtitle_1brjj {
47
+ } .circular-progress-bar__title_b6h52,
48
+ .circular-progress-bar__subtitle_b6h52 {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- }
55
- .circular-progress-bar__subtitle_1brjj {
54
+ } .circular-progress-bar__subtitle_b6h52 {
56
55
  max-height: 40px;
57
- }
58
- .circular-progress-bar__labelWrapper_1brjj {
56
+ } .circular-progress-bar__labelWrapper_b6h52 {
59
57
  text-align: center;
60
58
  position: absolute;
61
59
  top: 50%;
62
60
  left: 50%;
63
61
  width: 100%;
64
62
  transform: translate(-50%, -50%)
65
- }
66
- .circular-progress-bar__labelWrapper_1brjj.circular-progress-bar__label_1brjj {
63
+ } .circular-progress-bar__labelWrapper_b6h52.circular-progress-bar__label_b6h52 {
67
64
  display: flex;
68
65
  align-items: center;
69
66
  justify-content: center;
70
- }
71
- .circular-progress-bar__typography_1brjj {
67
+ } .circular-progress-bar__typography_b6h52 {
72
68
  font-feature-settings: 'ss01';
73
69
  font-weight: var(--circular-progress-bar-font-weight);
74
70
  font-family: var(--circular-progress-bar-font-family);
75
- }
76
- .circular-progress-bar__xxl_1brjj {
71
+ } .circular-progress-bar__xxl_b6h52 {
77
72
  width: 144px;
78
73
  height: 144px
79
- }
80
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__labelWrapper_1brjj {
74
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
81
75
  max-width: 128px;
82
- }
83
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__title_1brjj {
76
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__title_b6h52 {
84
77
  max-height: 32px;
85
- }
86
- .circular-progress-bar__xl_1brjj {
78
+ } .circular-progress-bar__xl_b6h52 {
87
79
  width: 128px;
88
80
  height: 128px
89
- }
90
- .circular-progress-bar__xl_1brjj .circular-progress-bar__labelWrapper_1brjj {
81
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
91
82
  max-width: 108px;
92
- }
93
- .circular-progress-bar__xl_1brjj .circular-progress-bar__title_1brjj {
83
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__title_b6h52 {
94
84
  max-height: 32px;
95
- }
96
- .circular-progress-bar__l_1brjj {
85
+ } .circular-progress-bar__l_b6h52 {
97
86
  width: 80px;
98
87
  height: 80px
99
- }
100
- .circular-progress-bar__l_1brjj .circular-progress-bar__labelWrapper_1brjj {
88
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
101
89
  max-width: 64px;
102
- }
103
- .circular-progress-bar__l_1brjj .circular-progress-bar__title_1brjj {
90
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__title_b6h52 {
104
91
  max-height: 24px;
105
- }
106
- .circular-progress-bar__m_1brjj {
92
+ } .circular-progress-bar__m_b6h52 {
107
93
  width: 64px;
108
94
  height: 64px
109
- }
110
- .circular-progress-bar__m_1brjj .circular-progress-bar__labelWrapper_1brjj {
95
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
111
96
  max-width: 48px;
112
- }
113
- .circular-progress-bar__m_1brjj .circular-progress-bar__title_1brjj {
97
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__title_b6h52 {
114
98
  max-height: 16px;
115
99
  margin: 0;
116
- }
117
- .circular-progress-bar__s_1brjj {
100
+ } .circular-progress-bar__s_b6h52 {
118
101
  width: 48px;
119
102
  height: 48px
120
- }
121
- .circular-progress-bar__s_1brjj .circular-progress-bar__labelWrapper_1brjj {
103
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
122
104
  max-width: 40px;
123
- }
124
- .circular-progress-bar__s_1brjj .circular-progress-bar__title_1brjj {
105
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__title_b6h52 {
125
106
  max-height: 16px;
126
107
  margin: 0;
127
- }
128
- .circular-progress-bar__xs_1brjj {
108
+ } .circular-progress-bar__xs_b6h52 {
129
109
  width: 24px;
130
110
  height: 24px
131
- }
132
- .circular-progress-bar__xs_1brjj .circular-progress-bar__labelWrapper_1brjj {
111
+ } .circular-progress-bar__xs_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
133
112
  max-width: 24px;
134
- }
135
- .circular-progress-bar__backgroundCircle_1brjj,
136
- .circular-progress-bar__progressCircle_1brjj {
113
+ } .circular-progress-bar__backgroundCircle_b6h52,
114
+ .circular-progress-bar__progressCircle_b6h52 {
137
115
  width: 100%;
138
116
  height: 100%;
139
117
  fill: transparent;
140
- }
141
- .circular-progress-bar__positive_1brjj {
118
+ } .circular-progress-bar__positive_b6h52 {
142
119
  stroke: var(--circular-progress-bar-positive-color);
143
- }
144
- .circular-progress-bar__negative_1brjj {
120
+ } .circular-progress-bar__negative_b6h52 {
145
121
  stroke: var(--circular-progress-bar-negative-color);
146
- }
147
- .circular-progress-bar__backgroundCircle_1brjj {
148
- stroke: var(--circular-progress-bar-bg-color)
149
- }
150
- .circular-progress-bar__backgroundCircle_1brjj.circular-progress-bar__stroke_1brjj {
122
+ } .circular-progress-bar__backgroundCircle_b6h52 {
123
+ stroke: var(--circular-progress-bar-stroke-color)
124
+ } .circular-progress-bar__backgroundCircle_b6h52.circular-progress-bar__stroke_b6h52 {
151
125
  stroke: transparent;
152
- }
153
- .circular-progress-bar__progressCircle_1brjj {
126
+ } .circular-progress-bar__progressCircle_b6h52 {
154
127
  stroke-linecap: round
155
- }
156
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-positive_1brjj {
128
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-positive_b6h52 {
157
129
  fill: var(--circular-progress-bar-positive-color);
158
- }
159
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-negative_1brjj {
130
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-negative_b6h52 {
160
131
  fill: var(--circular-progress-bar-negative-color);
161
- }
162
- .circular-progress-bar__iconWrapper_1brjj {
132
+ } .circular-progress-bar__iconWrapper_b6h52 {
163
133
  display: flex;
164
134
  align-items: center;
165
135
  justify-content: center
166
- }
167
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xxl_1brjj {
136
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xxl_b6h52 {
168
137
  max-width: 64px;
169
138
  max-height: 64px;
170
- }
171
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xl_1brjj {
139
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xl_b6h52 {
172
140
  max-width: 64px;
173
141
  max-height: 64px;
174
- }
175
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__l_1brjj {
142
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__l_b6h52 {
176
143
  max-width: 48px;
177
144
  max-height: 48px;
178
- }
179
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__m_1brjj {
145
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__m_b6h52 {
180
146
  max-width: 36px;
181
147
  max-height: 36px;
182
- }
183
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__s_1brjj {
148
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__s_b6h52 {
184
149
  max-width: 24px;
185
150
  max-height: 24px;
186
- }
187
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xs_1brjj {
151
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xs_b6h52 {
188
152
  max-width: 16px;
189
153
  max-height: 16px;
190
- }
191
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-tertiary_1brjj {
154
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-tertiary_b6h52 {
192
155
  color: var(--color-light-graphic-tertiary);
193
- }
194
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-positive_1brjj {
156
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-positive_b6h52 {
195
157
  color: var(--color-light-graphic-positive);
196
- }
197
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-negative_1brjj {
158
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-negative_b6h52 {
198
159
  color: var(--color-light-graphic-negative);
199
- }
200
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary-inverted_1brjj {
160
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary-inverted_b6h52 {
201
161
  color: var(--color-light-graphic-primary-inverted);
202
- }
203
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary_1brjj {
162
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary_b6h52 {
204
163
  color: var(--color-light-graphic-primary);
205
- }
206
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-secondary_1brjj {
164
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-secondary_b6h52 {
207
165
  color: var(--color-light-graphic-secondary);
208
- }
209
- .circular-progress-bar__icon_1brjj {
166
+ } .circular-progress-bar__icon_b6h52 {
210
167
  width: 100%;
211
168
  height: 100%;
212
169
  }
package/esm/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { CircularProgressBar } from './Component.js';
2
+ import 'tslib';
2
3
  import 'react';
3
4
  import 'classnames';
4
5
  import '@alfalab/core-components-typography/esm';
package/index.css CHANGED
@@ -1,28 +1,31 @@
1
- /* hash: 1tbp0 */
1
+ /* hash: 1vvwv */
2
2
  :root {
3
- --color-light-bg-tertiary: #e7e9eb;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-primary: #dbdee1;
4
5
  --color-light-graphic-negative: #f15045;
5
6
  --color-light-graphic-positive: #2fc26e;
6
7
  --color-light-graphic-primary: #0b1f35;
7
8
  --color-light-graphic-primary-inverted: #fff;
8
9
  --color-light-graphic-secondary: #6d7986;
9
10
  --color-light-graphic-tertiary: #b6bcc3;
10
- }
11
- :root {
11
+ } :root {
12
+ } :root {
13
+ } :root {
12
14
 
13
15
  /* Hard */
14
16
 
15
17
  /* Up */
16
18
 
17
19
  /* Hard up */
18
- }
19
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
20
23
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
21
24
  sans-serif;
22
- }
23
- :root {
24
- /* bg */
25
- --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
25
+ } :root {
26
+ } :root {
27
+ /* stroke */
28
+ --circular-progress-bar-stroke-color: var(--color-light-border-primary);
26
29
 
27
30
  /* positive */
28
31
  --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
@@ -33,180 +36,134 @@
33
36
  /* theme */
34
37
  --circular-progress-bar-font-family: var(--font-family-system);
35
38
  --circular-progress-bar-font-weight: 600;
36
- }
37
- .circular-progress-bar__component_1brjj {
39
+ } .circular-progress-bar__component_b6h52 {
38
40
  position: relative;
39
41
  display: flex;
40
42
  justify-content: center;
41
43
  align-items: center;
42
- }
43
- .circular-progress-bar__svg_1brjj {
44
+ } .circular-progress-bar__svg_b6h52 {
44
45
  display: block;
45
46
  width: 100%;
46
- }
47
- .circular-progress-bar__title_1brjj,
48
- .circular-progress-bar__subtitle_1brjj {
47
+ } .circular-progress-bar__title_b6h52,
48
+ .circular-progress-bar__subtitle_b6h52 {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- }
55
- .circular-progress-bar__subtitle_1brjj {
54
+ } .circular-progress-bar__subtitle_b6h52 {
56
55
  max-height: 40px;
57
- }
58
- .circular-progress-bar__labelWrapper_1brjj {
56
+ } .circular-progress-bar__labelWrapper_b6h52 {
59
57
  text-align: center;
60
58
  position: absolute;
61
59
  top: 50%;
62
60
  left: 50%;
63
61
  width: 100%;
64
62
  transform: translate(-50%, -50%)
65
- }
66
- .circular-progress-bar__labelWrapper_1brjj.circular-progress-bar__label_1brjj {
63
+ } .circular-progress-bar__labelWrapper_b6h52.circular-progress-bar__label_b6h52 {
67
64
  display: flex;
68
65
  align-items: center;
69
66
  justify-content: center;
70
- }
71
- .circular-progress-bar__typography_1brjj {
67
+ } .circular-progress-bar__typography_b6h52 {
72
68
  font-feature-settings: 'ss01';
73
69
  font-weight: var(--circular-progress-bar-font-weight);
74
70
  font-family: var(--circular-progress-bar-font-family);
75
- }
76
- .circular-progress-bar__xxl_1brjj {
71
+ } .circular-progress-bar__xxl_b6h52 {
77
72
  width: 144px;
78
73
  height: 144px
79
- }
80
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__labelWrapper_1brjj {
74
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
81
75
  max-width: 128px;
82
- }
83
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__title_1brjj {
76
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__title_b6h52 {
84
77
  max-height: 32px;
85
- }
86
- .circular-progress-bar__xl_1brjj {
78
+ } .circular-progress-bar__xl_b6h52 {
87
79
  width: 128px;
88
80
  height: 128px
89
- }
90
- .circular-progress-bar__xl_1brjj .circular-progress-bar__labelWrapper_1brjj {
81
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
91
82
  max-width: 108px;
92
- }
93
- .circular-progress-bar__xl_1brjj .circular-progress-bar__title_1brjj {
83
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__title_b6h52 {
94
84
  max-height: 32px;
95
- }
96
- .circular-progress-bar__l_1brjj {
85
+ } .circular-progress-bar__l_b6h52 {
97
86
  width: 80px;
98
87
  height: 80px
99
- }
100
- .circular-progress-bar__l_1brjj .circular-progress-bar__labelWrapper_1brjj {
88
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
101
89
  max-width: 64px;
102
- }
103
- .circular-progress-bar__l_1brjj .circular-progress-bar__title_1brjj {
90
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__title_b6h52 {
104
91
  max-height: 24px;
105
- }
106
- .circular-progress-bar__m_1brjj {
92
+ } .circular-progress-bar__m_b6h52 {
107
93
  width: 64px;
108
94
  height: 64px
109
- }
110
- .circular-progress-bar__m_1brjj .circular-progress-bar__labelWrapper_1brjj {
95
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
111
96
  max-width: 48px;
112
- }
113
- .circular-progress-bar__m_1brjj .circular-progress-bar__title_1brjj {
97
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__title_b6h52 {
114
98
  max-height: 16px;
115
99
  margin: 0;
116
- }
117
- .circular-progress-bar__s_1brjj {
100
+ } .circular-progress-bar__s_b6h52 {
118
101
  width: 48px;
119
102
  height: 48px
120
- }
121
- .circular-progress-bar__s_1brjj .circular-progress-bar__labelWrapper_1brjj {
103
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
122
104
  max-width: 40px;
123
- }
124
- .circular-progress-bar__s_1brjj .circular-progress-bar__title_1brjj {
105
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__title_b6h52 {
125
106
  max-height: 16px;
126
107
  margin: 0;
127
- }
128
- .circular-progress-bar__xs_1brjj {
108
+ } .circular-progress-bar__xs_b6h52 {
129
109
  width: 24px;
130
110
  height: 24px
131
- }
132
- .circular-progress-bar__xs_1brjj .circular-progress-bar__labelWrapper_1brjj {
111
+ } .circular-progress-bar__xs_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
133
112
  max-width: 24px;
134
- }
135
- .circular-progress-bar__backgroundCircle_1brjj,
136
- .circular-progress-bar__progressCircle_1brjj {
113
+ } .circular-progress-bar__backgroundCircle_b6h52,
114
+ .circular-progress-bar__progressCircle_b6h52 {
137
115
  width: 100%;
138
116
  height: 100%;
139
117
  fill: transparent;
140
- }
141
- .circular-progress-bar__positive_1brjj {
118
+ } .circular-progress-bar__positive_b6h52 {
142
119
  stroke: var(--circular-progress-bar-positive-color);
143
- }
144
- .circular-progress-bar__negative_1brjj {
120
+ } .circular-progress-bar__negative_b6h52 {
145
121
  stroke: var(--circular-progress-bar-negative-color);
146
- }
147
- .circular-progress-bar__backgroundCircle_1brjj {
148
- stroke: var(--circular-progress-bar-bg-color)
149
- }
150
- .circular-progress-bar__backgroundCircle_1brjj.circular-progress-bar__stroke_1brjj {
122
+ } .circular-progress-bar__backgroundCircle_b6h52 {
123
+ stroke: var(--circular-progress-bar-stroke-color)
124
+ } .circular-progress-bar__backgroundCircle_b6h52.circular-progress-bar__stroke_b6h52 {
151
125
  stroke: transparent;
152
- }
153
- .circular-progress-bar__progressCircle_1brjj {
126
+ } .circular-progress-bar__progressCircle_b6h52 {
154
127
  stroke-linecap: round
155
- }
156
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-positive_1brjj {
128
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-positive_b6h52 {
157
129
  fill: var(--circular-progress-bar-positive-color);
158
- }
159
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-negative_1brjj {
130
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-negative_b6h52 {
160
131
  fill: var(--circular-progress-bar-negative-color);
161
- }
162
- .circular-progress-bar__iconWrapper_1brjj {
132
+ } .circular-progress-bar__iconWrapper_b6h52 {
163
133
  display: flex;
164
134
  align-items: center;
165
135
  justify-content: center
166
- }
167
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xxl_1brjj {
136
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xxl_b6h52 {
168
137
  max-width: 64px;
169
138
  max-height: 64px;
170
- }
171
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xl_1brjj {
139
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xl_b6h52 {
172
140
  max-width: 64px;
173
141
  max-height: 64px;
174
- }
175
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__l_1brjj {
142
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__l_b6h52 {
176
143
  max-width: 48px;
177
144
  max-height: 48px;
178
- }
179
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__m_1brjj {
145
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__m_b6h52 {
180
146
  max-width: 36px;
181
147
  max-height: 36px;
182
- }
183
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__s_1brjj {
148
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__s_b6h52 {
184
149
  max-width: 24px;
185
150
  max-height: 24px;
186
- }
187
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xs_1brjj {
151
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xs_b6h52 {
188
152
  max-width: 16px;
189
153
  max-height: 16px;
190
- }
191
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-tertiary_1brjj {
154
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-tertiary_b6h52 {
192
155
  color: var(--color-light-graphic-tertiary);
193
- }
194
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-positive_1brjj {
156
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-positive_b6h52 {
195
157
  color: var(--color-light-graphic-positive);
196
- }
197
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-negative_1brjj {
158
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-negative_b6h52 {
198
159
  color: var(--color-light-graphic-negative);
199
- }
200
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary-inverted_1brjj {
160
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary-inverted_b6h52 {
201
161
  color: var(--color-light-graphic-primary-inverted);
202
- }
203
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary_1brjj {
162
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary_b6h52 {
204
163
  color: var(--color-light-graphic-primary);
205
- }
206
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-secondary_1brjj {
164
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-secondary_b6h52 {
207
165
  color: var(--color-light-graphic-secondary);
208
- }
209
- .circular-progress-bar__icon_1brjj {
166
+ } .circular-progress-bar__icon_b6h52 {
210
167
  width: 100%;
211
168
  height: 100%;
212
169
  }
package/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Component = require('./Component.js');
4
+ require('tslib');
4
5
  require('react');
5
6
  require('classnames');
6
7
  require('@alfalab/core-components-typography');
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
 
5
- const styles = {"component":"circular-progress-bar__component_1brjj","svg":"circular-progress-bar__svg_1brjj","title":"circular-progress-bar__title_1brjj","subtitle":"circular-progress-bar__subtitle_1brjj","labelWrapper":"circular-progress-bar__labelWrapper_1brjj","label":"circular-progress-bar__label_1brjj","typography":"circular-progress-bar__typography_1brjj","xxl":"circular-progress-bar__xxl_1brjj","xl":"circular-progress-bar__xl_1brjj","l":"circular-progress-bar__l_1brjj","m":"circular-progress-bar__m_1brjj","s":"circular-progress-bar__s_1brjj","xs":"circular-progress-bar__xs_1brjj","backgroundCircle":"circular-progress-bar__backgroundCircle_1brjj","progressCircle":"circular-progress-bar__progressCircle_1brjj","positive":"circular-progress-bar__positive_1brjj","negative":"circular-progress-bar__negative_1brjj","stroke":"circular-progress-bar__stroke_1brjj","bg-positive":"circular-progress-bar__bg-positive_1brjj","bg-negative":"circular-progress-bar__bg-negative_1brjj","iconWrapper":"circular-progress-bar__iconWrapper_1brjj","icon-tertiary":"circular-progress-bar__icon-tertiary_1brjj","icon-positive":"circular-progress-bar__icon-positive_1brjj","icon-negative":"circular-progress-bar__icon-negative_1brjj","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1brjj","icon-primary":"circular-progress-bar__icon-primary_1brjj","icon-secondary":"circular-progress-bar__icon-secondary_1brjj","icon":"circular-progress-bar__icon_1brjj"};
5
+ const styles = {"component":"circular-progress-bar__component_b6h52","svg":"circular-progress-bar__svg_b6h52","title":"circular-progress-bar__title_b6h52","subtitle":"circular-progress-bar__subtitle_b6h52","labelWrapper":"circular-progress-bar__labelWrapper_b6h52","label":"circular-progress-bar__label_b6h52","typography":"circular-progress-bar__typography_b6h52","xxl":"circular-progress-bar__xxl_b6h52","xl":"circular-progress-bar__xl_b6h52","l":"circular-progress-bar__l_b6h52","m":"circular-progress-bar__m_b6h52","s":"circular-progress-bar__s_b6h52","xs":"circular-progress-bar__xs_b6h52","backgroundCircle":"circular-progress-bar__backgroundCircle_b6h52","progressCircle":"circular-progress-bar__progressCircle_b6h52","positive":"circular-progress-bar__positive_b6h52","negative":"circular-progress-bar__negative_b6h52","stroke":"circular-progress-bar__stroke_b6h52","bg-positive":"circular-progress-bar__bg-positive_b6h52","bg-negative":"circular-progress-bar__bg-negative_b6h52","iconWrapper":"circular-progress-bar__iconWrapper_b6h52","icon-tertiary":"circular-progress-bar__icon-tertiary_b6h52","icon-positive":"circular-progress-bar__icon-positive_b6h52","icon-negative":"circular-progress-bar__icon-negative_b6h52","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_b6h52","icon-primary":"circular-progress-bar__icon-primary_b6h52","icon-secondary":"circular-progress-bar__icon-secondary_b6h52","icon":"circular-progress-bar__icon_b6h52"};
6
6
  require('./index.css')
7
7
 
8
8
  const SIZES = {
package/modern/index.css CHANGED
@@ -1,28 +1,31 @@
1
- /* hash: 1tbp0 */
1
+ /* hash: 1vvwv */
2
2
  :root {
3
- --color-light-bg-tertiary: #e7e9eb;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-primary: #dbdee1;
4
5
  --color-light-graphic-negative: #f15045;
5
6
  --color-light-graphic-positive: #2fc26e;
6
7
  --color-light-graphic-primary: #0b1f35;
7
8
  --color-light-graphic-primary-inverted: #fff;
8
9
  --color-light-graphic-secondary: #6d7986;
9
10
  --color-light-graphic-tertiary: #b6bcc3;
10
- }
11
- :root {
11
+ } :root {
12
+ } :root {
13
+ } :root {
12
14
 
13
15
  /* Hard */
14
16
 
15
17
  /* Up */
16
18
 
17
19
  /* Hard up */
18
- }
19
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
20
23
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
21
24
  sans-serif;
22
- }
23
- :root {
24
- /* bg */
25
- --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
25
+ } :root {
26
+ } :root {
27
+ /* stroke */
28
+ --circular-progress-bar-stroke-color: var(--color-light-border-primary);
26
29
 
27
30
  /* positive */
28
31
  --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
@@ -33,180 +36,134 @@
33
36
  /* theme */
34
37
  --circular-progress-bar-font-family: var(--font-family-system);
35
38
  --circular-progress-bar-font-weight: 600;
36
- }
37
- .circular-progress-bar__component_1brjj {
39
+ } .circular-progress-bar__component_b6h52 {
38
40
  position: relative;
39
41
  display: flex;
40
42
  justify-content: center;
41
43
  align-items: center;
42
- }
43
- .circular-progress-bar__svg_1brjj {
44
+ } .circular-progress-bar__svg_b6h52 {
44
45
  display: block;
45
46
  width: 100%;
46
- }
47
- .circular-progress-bar__title_1brjj,
48
- .circular-progress-bar__subtitle_1brjj {
47
+ } .circular-progress-bar__title_b6h52,
48
+ .circular-progress-bar__subtitle_b6h52 {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- }
55
- .circular-progress-bar__subtitle_1brjj {
54
+ } .circular-progress-bar__subtitle_b6h52 {
56
55
  max-height: 40px;
57
- }
58
- .circular-progress-bar__labelWrapper_1brjj {
56
+ } .circular-progress-bar__labelWrapper_b6h52 {
59
57
  text-align: center;
60
58
  position: absolute;
61
59
  top: 50%;
62
60
  left: 50%;
63
61
  width: 100%;
64
62
  transform: translate(-50%, -50%)
65
- }
66
- .circular-progress-bar__labelWrapper_1brjj.circular-progress-bar__label_1brjj {
63
+ } .circular-progress-bar__labelWrapper_b6h52.circular-progress-bar__label_b6h52 {
67
64
  display: flex;
68
65
  align-items: center;
69
66
  justify-content: center;
70
- }
71
- .circular-progress-bar__typography_1brjj {
67
+ } .circular-progress-bar__typography_b6h52 {
72
68
  font-feature-settings: 'ss01';
73
69
  font-weight: var(--circular-progress-bar-font-weight);
74
70
  font-family: var(--circular-progress-bar-font-family);
75
- }
76
- .circular-progress-bar__xxl_1brjj {
71
+ } .circular-progress-bar__xxl_b6h52 {
77
72
  width: 144px;
78
73
  height: 144px
79
- }
80
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__labelWrapper_1brjj {
74
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
81
75
  max-width: 128px;
82
- }
83
- .circular-progress-bar__xxl_1brjj .circular-progress-bar__title_1brjj {
76
+ } .circular-progress-bar__xxl_b6h52 .circular-progress-bar__title_b6h52 {
84
77
  max-height: 32px;
85
- }
86
- .circular-progress-bar__xl_1brjj {
78
+ } .circular-progress-bar__xl_b6h52 {
87
79
  width: 128px;
88
80
  height: 128px
89
- }
90
- .circular-progress-bar__xl_1brjj .circular-progress-bar__labelWrapper_1brjj {
81
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
91
82
  max-width: 108px;
92
- }
93
- .circular-progress-bar__xl_1brjj .circular-progress-bar__title_1brjj {
83
+ } .circular-progress-bar__xl_b6h52 .circular-progress-bar__title_b6h52 {
94
84
  max-height: 32px;
95
- }
96
- .circular-progress-bar__l_1brjj {
85
+ } .circular-progress-bar__l_b6h52 {
97
86
  width: 80px;
98
87
  height: 80px
99
- }
100
- .circular-progress-bar__l_1brjj .circular-progress-bar__labelWrapper_1brjj {
88
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
101
89
  max-width: 64px;
102
- }
103
- .circular-progress-bar__l_1brjj .circular-progress-bar__title_1brjj {
90
+ } .circular-progress-bar__l_b6h52 .circular-progress-bar__title_b6h52 {
104
91
  max-height: 24px;
105
- }
106
- .circular-progress-bar__m_1brjj {
92
+ } .circular-progress-bar__m_b6h52 {
107
93
  width: 64px;
108
94
  height: 64px
109
- }
110
- .circular-progress-bar__m_1brjj .circular-progress-bar__labelWrapper_1brjj {
95
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
111
96
  max-width: 48px;
112
- }
113
- .circular-progress-bar__m_1brjj .circular-progress-bar__title_1brjj {
97
+ } .circular-progress-bar__m_b6h52 .circular-progress-bar__title_b6h52 {
114
98
  max-height: 16px;
115
99
  margin: 0;
116
- }
117
- .circular-progress-bar__s_1brjj {
100
+ } .circular-progress-bar__s_b6h52 {
118
101
  width: 48px;
119
102
  height: 48px
120
- }
121
- .circular-progress-bar__s_1brjj .circular-progress-bar__labelWrapper_1brjj {
103
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
122
104
  max-width: 40px;
123
- }
124
- .circular-progress-bar__s_1brjj .circular-progress-bar__title_1brjj {
105
+ } .circular-progress-bar__s_b6h52 .circular-progress-bar__title_b6h52 {
125
106
  max-height: 16px;
126
107
  margin: 0;
127
- }
128
- .circular-progress-bar__xs_1brjj {
108
+ } .circular-progress-bar__xs_b6h52 {
129
109
  width: 24px;
130
110
  height: 24px
131
- }
132
- .circular-progress-bar__xs_1brjj .circular-progress-bar__labelWrapper_1brjj {
111
+ } .circular-progress-bar__xs_b6h52 .circular-progress-bar__labelWrapper_b6h52 {
133
112
  max-width: 24px;
134
- }
135
- .circular-progress-bar__backgroundCircle_1brjj,
136
- .circular-progress-bar__progressCircle_1brjj {
113
+ } .circular-progress-bar__backgroundCircle_b6h52,
114
+ .circular-progress-bar__progressCircle_b6h52 {
137
115
  width: 100%;
138
116
  height: 100%;
139
117
  fill: transparent;
140
- }
141
- .circular-progress-bar__positive_1brjj {
118
+ } .circular-progress-bar__positive_b6h52 {
142
119
  stroke: var(--circular-progress-bar-positive-color);
143
- }
144
- .circular-progress-bar__negative_1brjj {
120
+ } .circular-progress-bar__negative_b6h52 {
145
121
  stroke: var(--circular-progress-bar-negative-color);
146
- }
147
- .circular-progress-bar__backgroundCircle_1brjj {
148
- stroke: var(--circular-progress-bar-bg-color)
149
- }
150
- .circular-progress-bar__backgroundCircle_1brjj.circular-progress-bar__stroke_1brjj {
122
+ } .circular-progress-bar__backgroundCircle_b6h52 {
123
+ stroke: var(--circular-progress-bar-stroke-color)
124
+ } .circular-progress-bar__backgroundCircle_b6h52.circular-progress-bar__stroke_b6h52 {
151
125
  stroke: transparent;
152
- }
153
- .circular-progress-bar__progressCircle_1brjj {
126
+ } .circular-progress-bar__progressCircle_b6h52 {
154
127
  stroke-linecap: round
155
- }
156
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-positive_1brjj {
128
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-positive_b6h52 {
157
129
  fill: var(--circular-progress-bar-positive-color);
158
- }
159
- .circular-progress-bar__progressCircle_1brjj.circular-progress-bar__bg-negative_1brjj {
130
+ } .circular-progress-bar__progressCircle_b6h52.circular-progress-bar__bg-negative_b6h52 {
160
131
  fill: var(--circular-progress-bar-negative-color);
161
- }
162
- .circular-progress-bar__iconWrapper_1brjj {
132
+ } .circular-progress-bar__iconWrapper_b6h52 {
163
133
  display: flex;
164
134
  align-items: center;
165
135
  justify-content: center
166
- }
167
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xxl_1brjj {
136
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xxl_b6h52 {
168
137
  max-width: 64px;
169
138
  max-height: 64px;
170
- }
171
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xl_1brjj {
139
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xl_b6h52 {
172
140
  max-width: 64px;
173
141
  max-height: 64px;
174
- }
175
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__l_1brjj {
142
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__l_b6h52 {
176
143
  max-width: 48px;
177
144
  max-height: 48px;
178
- }
179
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__m_1brjj {
145
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__m_b6h52 {
180
146
  max-width: 36px;
181
147
  max-height: 36px;
182
- }
183
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__s_1brjj {
148
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__s_b6h52 {
184
149
  max-width: 24px;
185
150
  max-height: 24px;
186
- }
187
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__xs_1brjj {
151
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__xs_b6h52 {
188
152
  max-width: 16px;
189
153
  max-height: 16px;
190
- }
191
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-tertiary_1brjj {
154
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-tertiary_b6h52 {
192
155
  color: var(--color-light-graphic-tertiary);
193
- }
194
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-positive_1brjj {
156
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-positive_b6h52 {
195
157
  color: var(--color-light-graphic-positive);
196
- }
197
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-negative_1brjj {
158
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-negative_b6h52 {
198
159
  color: var(--color-light-graphic-negative);
199
- }
200
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary-inverted_1brjj {
160
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary-inverted_b6h52 {
201
161
  color: var(--color-light-graphic-primary-inverted);
202
- }
203
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-primary_1brjj {
162
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-primary_b6h52 {
204
163
  color: var(--color-light-graphic-primary);
205
- }
206
- .circular-progress-bar__iconWrapper_1brjj.circular-progress-bar__icon-secondary_1brjj {
164
+ } .circular-progress-bar__iconWrapper_b6h52.circular-progress-bar__icon-secondary_b6h52 {
207
165
  color: var(--color-light-graphic-secondary);
208
- }
209
- .circular-progress-bar__icon_1brjj {
166
+ } .circular-progress-bar__icon_b6h52 {
210
167
  width: 100%;
211
168
  height: 100%;
212
169
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.0.8",
3
+ "version": "3.0.10",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,8 +14,9 @@
14
14
  "directory": "dist"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-typography": "^3.0.8",
18
- "classnames": "^2.3.1"
17
+ "@alfalab/core-components-typography": "^3.1.1",
18
+ "classnames": "^2.3.1",
19
+ "tslib": "^2.4.0"
19
20
  },
20
21
  "peerDependencies": {
21
22
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"