@elliemae/ds-circular-progress-indicator 2.4.2-rc.9 → 2.4.2

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 (7) hide show
  1. package/cjs/DSCircularProgressIndicator.js +12 -12
  2. package/cjs/v2/DSCircularIndeterminateIndicator.js +9 -7
  3. package/cjs/v2/styled.js +71 -10
  4. package/esm/DSCircularProgressIndicator.js +12 -12
  5. package/esm/v2/DSCircularIndeterminateIndicator.js +9 -7
  6. package/esm/v2/styled.js +71 -9
  7. package/package.json +6 -6
package/cjs/DSCircularProgressIndicator.js CHANGED
@@ -105,7 +105,7 @@ const CircularProgressIndicator = _ref => {
105
105
  "data-testid": "circular-indicator-label",
106
106
  className: classNameElement('label'),
107
107
  style: {
108
- fontSize: "".concat(sizeLabel, "px")
108
+ fontSize: `${sizeLabel}px`
109
109
  }
110
110
  }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
111
111
 
@@ -127,26 +127,26 @@ const CircularProgressIndicator = _ref => {
127
127
  cy: "50%",
128
128
  fill: "none",
129
129
  r: "28",
130
- strokeWidth: "".concat(trackWidth, "px")
130
+ strokeWidth: `${trackWidth}px`
131
131
  });
132
132
 
133
133
  const grayArc = /*#__PURE__*/_jsx__default["default"]("circle", {
134
134
  className: classNameElement('arc-gray'),
135
135
  stroke: "#E0E3E8",
136
- strokeDasharray: "".concat(grayArcStrokeDasharray),
137
- strokeDashoffset: "".concat(grayArcStrokeDashoffset),
136
+ strokeDasharray: `${grayArcStrokeDasharray}`,
137
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
138
138
  cx: "50%",
139
139
  cy: "50%",
140
140
  fill: "none",
141
141
  r: "28",
142
- strokeWidth: "".concat(trackWidth, "px")
142
+ strokeWidth: `${trackWidth}px`
143
143
  });
144
144
 
145
145
  const indicator = /*#__PURE__*/_jsx__default["default"]("svg", {
146
- height: "".concat(sizePx, "px"),
146
+ height: `${sizePx}px`,
147
147
  version: "1.1",
148
148
  viewBox: "0 0 66 66",
149
- width: "".concat(sizePx, "px"),
149
+ width: `${sizePx}px`,
150
150
  "data-testid": "circular-indicator"
151
151
  }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
152
152
  id: "grad1",
@@ -200,10 +200,10 @@ const CircularProgressIndicator = _ref => {
200
200
  id: "inverseL",
201
201
  viewBox: "0 0 5 10",
202
202
  refX: "0.5",
203
- refY: "".concat(markerRefY),
203
+ refY: `${markerRefY}`,
204
204
  markerUnits: "strokeWidth",
205
205
  markerWidth: "0.5",
206
- markerHeight: "".concat(markerHeight),
206
+ markerHeight: `${markerHeight}`,
207
207
  orient: "auto"
208
208
  }, void 0, _path || (_path = /*#__PURE__*/_jsx__default["default"]("path", {
209
209
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
@@ -215,7 +215,7 @@ const CircularProgressIndicator = _ref => {
215
215
  refY: "5",
216
216
  markerUnits: "strokeWidth",
217
217
  markerWidth: "0.7",
218
- markerHeight: "".concat(markerHeight)
218
+ markerHeight: `${markerHeight}`
219
219
  }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx__default["default"]("path", {
220
220
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
221
221
  fill: "#FFF"
@@ -228,14 +228,14 @@ const CircularProgressIndicator = _ref => {
228
228
  className: classNameElement('arc-blue'),
229
229
  d: "M30,5 C17.536025,6 6,17.536027 5,31",
230
230
  stroke: "#5594e2",
231
- strokeWidth: "".concat(strokeWidth - 0.5, "px"),
231
+ strokeWidth: `${strokeWidth - 0.5}px`,
232
232
  strokeLinecap: "round",
233
233
  "data-testid": "circular-indicator-blue-arc"
234
234
  }), /*#__PURE__*/_jsx__default["default"]("path", {
235
235
  className: classNameElement('arc-white'),
236
236
  d: "M33,5 C17.536027,5 5,17.536027 5,33",
237
237
  stroke: "#FFF",
238
- strokeWidth: "".concat(strokeWidth + 2, "px"),
238
+ strokeWidth: `${strokeWidth + 2}px`,
239
239
  markerStart: "url(#inverseR)",
240
240
  markerEnd: "url(#inverseL)"
241
241
  }), grayArc));
package/cjs/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -62,7 +62,7 @@ const DSCircularIndeterminateIndicator = props => {
62
62
  width: constants.sizeToPx[size],
63
63
  height: constants.sizeToPx[size]
64
64
  }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("clipPath", {
65
- id: "not-gradient-clip-".concat(uniqueId)
65
+ id: `not-gradient-clip-${uniqueId}`
66
66
  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledRect, {
67
67
  x: "0%",
68
68
  y: "0%",
@@ -70,17 +70,17 @@ const DSCircularIndeterminateIndicator = props => {
70
70
  height: "100%",
71
71
  __duration: __duration
72
72
  })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
73
- id: "gradient-color-".concat(uniqueId),
73
+ id: `gradient-color-${uniqueId}`,
74
74
  x1: "0%",
75
75
  x2: "0%",
76
76
  y1: "0%",
77
77
  y2: "100%"
78
78
  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
79
79
  offset: "10%",
80
- stopColor: "".concat(constants.colorToHex[color], "00")
80
+ stopColor: `${constants.colorToHex[color]}00`
81
81
  }), /*#__PURE__*/_jsx__default["default"]("stop", {
82
82
  offset: "90%",
83
- stopColor: "".concat(constants.colorToHex[color], "FF")
83
+ stopColor: `${constants.colorToHex[color]}FF`
84
84
  }))), /*#__PURE__*/_jsx__default["default"](styled.StyledCircle, {
85
85
  cx: "50%",
86
86
  cy: "50%",
@@ -88,13 +88,15 @@ const DSCircularIndeterminateIndicator = props => {
88
88
  strokeWidth: constants.sizeToWeight[size],
89
89
  stroke: constants.colorToHex[color],
90
90
  strokeLinecap: "round",
91
- clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
91
+ clipPath: `url(#not-gradient-clip-${uniqueId})`,
92
92
  __duration: __duration
93
93
  }), /*#__PURE__*/_jsx__default["default"](styled.StyledPath, {
94
- d: "M ".concat(constants.sizeToPx[size] / 2, " ").concat(constants.sizeToPx[size] / 2, "\n m ").concat(circleRadius, ", 0\n a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
94
+ d: `M ${constants.sizeToPx[size] / 2} ${constants.sizeToPx[size] / 2}
95
+ m ${circleRadius}, 0
96
+ a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
95
97
  strokeWidth: constants.sizeToWeight[size],
96
98
  fill: "transparent",
97
- stroke: "url(#gradient-color-".concat(uniqueId, ")"),
99
+ stroke: `url(#gradient-color-${uniqueId})`,
98
100
  strokeLinecap: "round",
99
101
  r: circleRadius,
100
102
  __duration: __duration
package/cjs/v2/styled.js CHANGED
@@ -2,16 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var styled = require('styled-components');
7
6
  var dsSystem = require('@elliemae/ds-system');
8
7
 
9
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
9
 
11
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
11
 
14
- var _templateObject, _templateObject2, _templateObject3;
12
+ /* eslint-disable no-underscore-dangle */
15
13
  const {
16
14
  PI
17
15
  } = Math;
@@ -19,17 +17,80 @@ const {
19
17
  const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
20
18
 
21
19
  const strokeTailAnimation = r => {
22
- const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
23
- const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
24
- return dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n 0% {\n stroke-dasharray: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n }\n"])), miniDash, fullDash, miniDash);
20
+ const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
21
+ const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
22
+ return dsSystem.kfrm`
23
+ 0% {
24
+ stroke-dasharray: ${miniDash};
25
+ }
26
+ 50% {
27
+ stroke-dasharray: ${fullDash};
28
+ }
29
+ 100% {
30
+ stroke-dasharray: ${miniDash};
31
+ }
32
+ `;
25
33
  };
26
34
 
27
- const rotateAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n"])));
35
+ const rotateAnimation = dsSystem.kfrm`
36
+ 0%, 12.5% {
37
+ transform: rotate(0);
38
+ }
39
+ 25%, 37.5% {
40
+ transform: rotate(270deg);
41
+ }
42
+ 50%, 62.5% {
43
+ transform: rotate(540deg);
44
+ }
45
+ 75%, 87.5% {
46
+ transform: rotate(810deg);
47
+ }
48
+ 100% {
49
+ transform: rotate(1080deg);
50
+ }
51
+ `;
28
52
 
29
53
  const dashAnimation = r => {
30
- const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
31
- const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
32
- return dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n 0% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 37.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 62.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 75% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 87.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n"])), miniDash, fullDash, miniDash, getArcLength(-75, r), fullDash, getArcLength(-75, r), miniDash, getArcLength(-150, r), fullDash, getArcLength(-150, r), miniDash, getArcLength(-225, r), fullDash, getArcLength(-225, r), miniDash, getArcLength(-300, r));
54
+ const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
55
+ const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
56
+ return dsSystem.kfrm`
57
+ 0% {
58
+ stroke-dasharray: ${miniDash};
59
+ stroke-dashoffset: 0;
60
+ }
61
+ 12.5% {
62
+ stroke-dasharray: ${fullDash};
63
+ stroke-dashoffset: 0;
64
+ }
65
+ 25% {
66
+ stroke-dasharray: ${miniDash};
67
+ stroke-dashoffset: ${getArcLength(-75, r)};
68
+ }
69
+ 37.5% {
70
+ stroke-dasharray: ${fullDash};
71
+ stroke-dashoffset: ${getArcLength(-75, r)};
72
+ }
73
+ 50% {
74
+ stroke-dasharray: ${miniDash};
75
+ stroke-dashoffset: ${getArcLength(-150, r)};
76
+ }
77
+ 62.5% {
78
+ stroke-dasharray: ${fullDash};
79
+ stroke-dashoffset: ${getArcLength(-150, r)};
80
+ }
81
+ 75% {
82
+ stroke-dasharray: ${miniDash};
83
+ stroke-dashoffset: ${getArcLength(-225, r)};
84
+ }
85
+ 87.5% {
86
+ stroke-dasharray: ${fullDash};
87
+ stroke-dashoffset: ${getArcLength(-225, r)};
88
+ }
89
+ 100% {
90
+ stroke-dasharray: ${miniDash};
91
+ stroke-dashoffset: ${getArcLength(-300, r)};
92
+ }
93
+ `;
33
94
  };
34
95
 
35
96
  const StyledSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
package/esm/DSCircularProgressIndicator.js CHANGED
@@ -96,7 +96,7 @@ const CircularProgressIndicator = _ref => {
96
96
  "data-testid": "circular-indicator-label",
97
97
  className: classNameElement('label'),
98
98
  style: {
99
- fontSize: "".concat(sizeLabel, "px")
99
+ fontSize: `${sizeLabel}px`
100
100
  }
101
101
  }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
102
102
 
@@ -118,26 +118,26 @@ const CircularProgressIndicator = _ref => {
118
118
  cy: "50%",
119
119
  fill: "none",
120
120
  r: "28",
121
- strokeWidth: "".concat(trackWidth, "px")
121
+ strokeWidth: `${trackWidth}px`
122
122
  });
123
123
 
124
124
  const grayArc = /*#__PURE__*/_jsx("circle", {
125
125
  className: classNameElement('arc-gray'),
126
126
  stroke: "#E0E3E8",
127
- strokeDasharray: "".concat(grayArcStrokeDasharray),
128
- strokeDashoffset: "".concat(grayArcStrokeDashoffset),
127
+ strokeDasharray: `${grayArcStrokeDasharray}`,
128
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
129
129
  cx: "50%",
130
130
  cy: "50%",
131
131
  fill: "none",
132
132
  r: "28",
133
- strokeWidth: "".concat(trackWidth, "px")
133
+ strokeWidth: `${trackWidth}px`
134
134
  });
135
135
 
136
136
  const indicator = /*#__PURE__*/_jsx("svg", {
137
- height: "".concat(sizePx, "px"),
137
+ height: `${sizePx}px`,
138
138
  version: "1.1",
139
139
  viewBox: "0 0 66 66",
140
- width: "".concat(sizePx, "px"),
140
+ width: `${sizePx}px`,
141
141
  "data-testid": "circular-indicator"
142
142
  }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("linearGradient", {
143
143
  id: "grad1",
@@ -191,10 +191,10 @@ const CircularProgressIndicator = _ref => {
191
191
  id: "inverseL",
192
192
  viewBox: "0 0 5 10",
193
193
  refX: "0.5",
194
- refY: "".concat(markerRefY),
194
+ refY: `${markerRefY}`,
195
195
  markerUnits: "strokeWidth",
196
196
  markerWidth: "0.5",
197
- markerHeight: "".concat(markerHeight),
197
+ markerHeight: `${markerHeight}`,
198
198
  orient: "auto"
199
199
  }, void 0, _path || (_path = /*#__PURE__*/_jsx("path", {
200
200
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
@@ -206,7 +206,7 @@ const CircularProgressIndicator = _ref => {
206
206
  refY: "5",
207
207
  markerUnits: "strokeWidth",
208
208
  markerWidth: "0.7",
209
- markerHeight: "".concat(markerHeight)
209
+ markerHeight: `${markerHeight}`
210
210
  }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx("path", {
211
211
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
212
212
  fill: "#FFF"
@@ -219,14 +219,14 @@ const CircularProgressIndicator = _ref => {
219
219
  className: classNameElement('arc-blue'),
220
220
  d: "M30,5 C17.536025,6 6,17.536027 5,31",
221
221
  stroke: "#5594e2",
222
- strokeWidth: "".concat(strokeWidth - 0.5, "px"),
222
+ strokeWidth: `${strokeWidth - 0.5}px`,
223
223
  strokeLinecap: "round",
224
224
  "data-testid": "circular-indicator-blue-arc"
225
225
  }), /*#__PURE__*/_jsx("path", {
226
226
  className: classNameElement('arc-white'),
227
227
  d: "M33,5 C17.536027,5 5,17.536027 5,33",
228
228
  stroke: "#FFF",
229
- strokeWidth: "".concat(strokeWidth + 2, "px"),
229
+ strokeWidth: `${strokeWidth + 2}px`,
230
230
  markerStart: "url(#inverseR)",
231
231
  markerEnd: "url(#inverseL)"
232
232
  }), grayArc));
package/esm/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -53,7 +53,7 @@ const DSCircularIndeterminateIndicator = props => {
53
53
  width: sizeToPx[size],
54
54
  height: sizeToPx[size]
55
55
  }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("clipPath", {
56
- id: "not-gradient-clip-".concat(uniqueId)
56
+ id: `not-gradient-clip-${uniqueId}`
57
57
  }, void 0, /*#__PURE__*/_jsx(StyledRect, {
58
58
  x: "0%",
59
59
  y: "0%",
@@ -61,17 +61,17 @@ const DSCircularIndeterminateIndicator = props => {
61
61
  height: "100%",
62
62
  __duration: __duration
63
63
  })), /*#__PURE__*/_jsx("linearGradient", {
64
- id: "gradient-color-".concat(uniqueId),
64
+ id: `gradient-color-${uniqueId}`,
65
65
  x1: "0%",
66
66
  x2: "0%",
67
67
  y1: "0%",
68
68
  y2: "100%"
69
69
  }, void 0, /*#__PURE__*/_jsx("stop", {
70
70
  offset: "10%",
71
- stopColor: "".concat(colorToHex[color], "00")
71
+ stopColor: `${colorToHex[color]}00`
72
72
  }), /*#__PURE__*/_jsx("stop", {
73
73
  offset: "90%",
74
- stopColor: "".concat(colorToHex[color], "FF")
74
+ stopColor: `${colorToHex[color]}FF`
75
75
  }))), /*#__PURE__*/_jsx(StyledCircle, {
76
76
  cx: "50%",
77
77
  cy: "50%",
@@ -79,13 +79,15 @@ const DSCircularIndeterminateIndicator = props => {
79
79
  strokeWidth: sizeToWeight[size],
80
80
  stroke: colorToHex[color],
81
81
  strokeLinecap: "round",
82
- clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
82
+ clipPath: `url(#not-gradient-clip-${uniqueId})`,
83
83
  __duration: __duration
84
84
  }), /*#__PURE__*/_jsx(StyledPath, {
85
- d: "M ".concat(sizeToPx[size] / 2, " ").concat(sizeToPx[size] / 2, "\n m ").concat(circleRadius, ", 0\n a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
85
+ d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
86
+ m ${circleRadius}, 0
87
+ a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
86
88
  strokeWidth: sizeToWeight[size],
87
89
  fill: "transparent",
88
- stroke: "url(#gradient-color-".concat(uniqueId, ")"),
90
+ stroke: `url(#gradient-color-${uniqueId})`,
89
91
  strokeLinecap: "round",
90
92
  r: circleRadius,
91
93
  __duration: __duration
package/esm/v2/styled.js CHANGED
@@ -1,8 +1,7 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import styled from 'styled-components';
3
2
  import { kfrm } from '@elliemae/ds-system';
4
3
 
5
- var _templateObject, _templateObject2, _templateObject3;
4
+ /* eslint-disable no-underscore-dangle */
6
5
  const {
7
6
  PI
8
7
  } = Math;
@@ -10,17 +9,80 @@ const {
10
9
  const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
11
10
 
12
11
  const strokeTailAnimation = r => {
13
- const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
14
- const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
15
- return kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n }\n"])), miniDash, fullDash, miniDash);
12
+ const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
13
+ const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
14
+ return kfrm`
15
+ 0% {
16
+ stroke-dasharray: ${miniDash};
17
+ }
18
+ 50% {
19
+ stroke-dasharray: ${fullDash};
20
+ }
21
+ 100% {
22
+ stroke-dasharray: ${miniDash};
23
+ }
24
+ `;
16
25
  };
17
26
 
18
- const rotateAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n"])));
27
+ const rotateAnimation = kfrm`
28
+ 0%, 12.5% {
29
+ transform: rotate(0);
30
+ }
31
+ 25%, 37.5% {
32
+ transform: rotate(270deg);
33
+ }
34
+ 50%, 62.5% {
35
+ transform: rotate(540deg);
36
+ }
37
+ 75%, 87.5% {
38
+ transform: rotate(810deg);
39
+ }
40
+ 100% {
41
+ transform: rotate(1080deg);
42
+ }
43
+ `;
19
44
 
20
45
  const dashAnimation = r => {
21
- const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
22
- const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
23
- return kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 37.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 62.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 75% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 87.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n"])), miniDash, fullDash, miniDash, getArcLength(-75, r), fullDash, getArcLength(-75, r), miniDash, getArcLength(-150, r), fullDash, getArcLength(-150, r), miniDash, getArcLength(-225, r), fullDash, getArcLength(-225, r), miniDash, getArcLength(-300, r));
46
+ const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
47
+ const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
48
+ return kfrm`
49
+ 0% {
50
+ stroke-dasharray: ${miniDash};
51
+ stroke-dashoffset: 0;
52
+ }
53
+ 12.5% {
54
+ stroke-dasharray: ${fullDash};
55
+ stroke-dashoffset: 0;
56
+ }
57
+ 25% {
58
+ stroke-dasharray: ${miniDash};
59
+ stroke-dashoffset: ${getArcLength(-75, r)};
60
+ }
61
+ 37.5% {
62
+ stroke-dasharray: ${fullDash};
63
+ stroke-dashoffset: ${getArcLength(-75, r)};
64
+ }
65
+ 50% {
66
+ stroke-dasharray: ${miniDash};
67
+ stroke-dashoffset: ${getArcLength(-150, r)};
68
+ }
69
+ 62.5% {
70
+ stroke-dasharray: ${fullDash};
71
+ stroke-dashoffset: ${getArcLength(-150, r)};
72
+ }
73
+ 75% {
74
+ stroke-dasharray: ${miniDash};
75
+ stroke-dashoffset: ${getArcLength(-225, r)};
76
+ }
77
+ 87.5% {
78
+ stroke-dasharray: ${fullDash};
79
+ stroke-dashoffset: ${getArcLength(-225, r)};
80
+ }
81
+ 100% {
82
+ stroke-dasharray: ${miniDash};
83
+ stroke-dashoffset: ${getArcLength(-300, r)};
84
+ }
85
+ `;
24
86
  };
25
87
 
26
88
  const StyledSvg = /*#__PURE__*/styled.svg.withConfig({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "2.4.2-rc.9",
3
+ "version": "2.4.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "module": "./esm/index.js",
@@ -56,11 +56,11 @@
56
56
  "build": "node ../../scripts/build/build.js"
57
57
  },
58
58
  "dependencies": {
59
- "@elliemae/ds-classnames": "2.4.2-rc.9",
60
- "@elliemae/ds-grid": "2.4.2-rc.9",
61
- "@elliemae/ds-props-helpers": "2.4.2-rc.9",
62
- "@elliemae/ds-system": "2.4.2-rc.9",
63
- "@elliemae/ds-tooltip": "2.4.2-rc.9",
59
+ "@elliemae/ds-classnames": "2.4.2",
60
+ "@elliemae/ds-grid": "2.4.2",
61
+ "@elliemae/ds-props-helpers": "2.4.2",
62
+ "@elliemae/ds-system": "2.4.2",
63
+ "@elliemae/ds-tooltip": "2.4.2",
64
64
  "react-desc": "~4.1.3",
65
65
  "uid": "~2.0.0"
66
66
  },