@elliemae/ds-indeterminate-progress-indicator 3.55.0-next.9 → 3.56.0-rc.1
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/dist/cjs/DSIndeterminateProgressIndicator.js +1 -1
- package/dist/cjs/DSIndeterminateProgressIndicator.js.map +2 -2
- package/dist/cjs/styled.js +8 -11
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSIndeterminateProgressIndicator.js +1 -1
- package/dist/esm/DSIndeterminateProgressIndicator.js.map +2 -2
- package/dist/esm/styled.js +8 -11
- package/dist/esm/styled.js.map +2 -2
- package/package.json +6 -6
@@ -37,10 +37,10 @@ var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
38
38
|
var import_react = require("react");
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
40
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
41
40
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
42
41
|
var import_useIndeterminateProgressIndicator = require("./config/useIndeterminateProgressIndicator.js");
|
43
42
|
var import_constants = require("./constants/index.js");
|
43
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
44
44
|
var import_styled = require("./styled.js");
|
45
45
|
const DSIndeterminateProgressIndicator = (props) => {
|
46
46
|
const { propsWithDefault, label } = (0, import_useIndeterminateProgressIndicator.useIndeterminateProgressIndicator)(props);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/DSIndeterminateProgressIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAAqE;AACrE,
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from './styled.js';\n\nconst DSIndeterminateProgressIndicator: React.ComponentType<DSIndeterminateProgressIndicatorT.Props> = (props) => {\n const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);\n const {\n containerProps,\n complete,\n failed,\n processing,\n processingComplete,\n processingFail,\n animated,\n percent,\n lineOnly,\n } = propsWithDefault;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <Container\n aria-busy={processing}\n aria-label={label}\n aria-live=\"polite\"\n role=\"alert\"\n lineOnly={lineOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...globalAttributes}\n {...xstyledAttributes}\n {...containerProps}\n >\n {!lineOnly ? (\n <TooltipTextProvider>\n <StyledTruncatedTooltipText\n value={label}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </TooltipTextProvider>\n ) : null}\n <Bar getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <BarIndicator\n complete={complete}\n failed={failed}\n processing={processing}\n animated={animated}\n processingComplete={processingComplete}\n processingFail={processingFail}\n percent={percent}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Bar>\n </Container>\n );\n};\n\nDSIndeterminateProgressIndicator.displayName = DSIndeterminateProgressIndicatorName;\nconst IndeterminateProgressIndicatorWithSchema = describe(DSIndeterminateProgressIndicator);\nIndeterminateProgressIndicatorWithSchema.propTypes = DSIndeterminateProgressIndicatorPropTypes;\n\nexport { DSIndeterminateProgressIndicator, IndeterminateProgressIndicatorWithSchema };\nexport default DSIndeterminateProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAAqE;AACrE,mCAGO;AACP,+CAAkD;AAClD,uBAAqD;AACrD,uCAAoC;AACpC,oBAAyE;AAEzE,MAAM,mCAAiG,CAAC,UAAU;AAChH,QAAM,EAAE,kBAAkB,MAAM,QAAI,4EAAkC,KAAK;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,wBAAoB,4CAAmB,gBAAgB;AAC7D,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,SAAC,WACA,4CAAC,wDACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ,4CAAC,qBAAI,eAA8B,wBACjC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,cAAc;AAC/C,MAAM,+CAA2C,kCAAS,gCAAgC;AAC1F,yCAAyC,YAAY;AAGrD,IAAO,2CAAQ;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
@@ -123,22 +123,22 @@ const BarIndicator = (0, import_ds_system.styled)("div", {
|
|
123
123
|
return import_ds_system.css`
|
124
124
|
background-color: ${theme.colors.neutral[500]};
|
125
125
|
`;
|
126
|
-
if (complete && processing)
|
126
|
+
else if (complete && processing)
|
127
127
|
return import_ds_system.css`
|
128
128
|
width: 100%;
|
129
129
|
background-color: ${theme.colors.brand[500]};
|
130
130
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
131
131
|
animation-fill-mode: forwards;
|
132
132
|
`;
|
133
|
-
if (complete && !processingComplete && !processing)
|
133
|
+
else if (complete && !processingComplete && !processing)
|
134
134
|
return import_ds_system.css`
|
135
135
|
background-color: ${theme.colors.success[900]};
|
136
136
|
`;
|
137
|
-
if (failed && !processingFail && !processing)
|
137
|
+
else if (failed && !processingFail && !processing)
|
138
138
|
return import_ds_system.css`
|
139
139
|
background-color: #e34256;
|
140
140
|
`;
|
141
|
-
if (processing) {
|
141
|
+
else if (processing) {
|
142
142
|
if (animated) {
|
143
143
|
return import_ds_system.css`
|
144
144
|
width: 100%;
|
@@ -149,37 +149,34 @@ const BarIndicator = (0, import_ds_system.styled)("div", {
|
|
149
149
|
return import_ds_system.css`
|
150
150
|
background-color: ${theme.colors.brand[500]};
|
151
151
|
`;
|
152
|
-
}
|
153
|
-
if (processingComplete && !complete) {
|
152
|
+
} else if (processingComplete && !complete) {
|
154
153
|
return import_ds_system.css`
|
155
154
|
width: 50%;
|
156
155
|
animation: ${ProcessingSuccess} 4s infinite;
|
157
156
|
animation-fill-mode: forwards;
|
158
157
|
background-color: ${theme.colors.brand[500]};
|
159
158
|
`;
|
160
|
-
}
|
161
|
-
if (processingComplete && complete)
|
159
|
+
} else if (processingComplete && complete)
|
162
160
|
return import_ds_system.css`
|
163
161
|
width: 100%;
|
164
162
|
background-color: ${theme.colors.brand[500]};
|
165
163
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
166
164
|
animation-fill-mode: forwards;
|
167
165
|
`;
|
168
|
-
if (processingFail && !failed)
|
166
|
+
else if (processingFail && !failed)
|
169
167
|
return import_ds_system.css`
|
170
168
|
width: 50%;
|
171
169
|
animation: ${ProcessingFail} 4s infinite;
|
172
170
|
animation-fill-mode: forwards;
|
173
171
|
background-color: ${theme.colors.brand[500]};
|
174
172
|
`;
|
175
|
-
if (processingFail && failed)
|
173
|
+
else if (processingFail && failed)
|
176
174
|
return import_ds_system.css`
|
177
175
|
width: 100%;
|
178
176
|
background-color: ${theme.colors.brand[500]};
|
179
177
|
animation: ${ProcessingFailEnd} 1s ease-in-out;
|
180
178
|
animation-fill-mode: forwards;
|
181
179
|
`;
|
182
|
-
return "";
|
183
180
|
}};
|
184
181
|
`;
|
185
182
|
//# sourceMappingURL=styled.js.map
|
package/dist/cjs/styled.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport { type DSIndeterminateProgressIndicatorT } from './react-desc-prop-types.js';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSIndeterminateProgressIndicatorName, DSIndeterminateProgressIndicatorSlots } from './constants/index.js';\n\nconst IndeterminateAnimation = (color: string) => kfrm`\n 0% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 25% {\n transform: scaleX(0.4);\n }\n 50% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 50.1% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n 75% {\n transform: scaleX(0.4);\n }\n 100% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n`;\n\nconst ProcessingSuccess = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingSuccessEnd = (color: string) => kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: ${color}; }\n`;\n\nconst ProcessingFail = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50%; }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingFailEnd = kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: #e34256; }\n`;\n\nexport const Container = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.ROOT,\n})<DSIndeterminateProgressIndicatorT.Props>`\n width: 100%;\n padding: ${({ theme, lineOnly }) => (lineOnly ? 0 : `${theme.space.xxs} ${theme.space.xs}`)};\n`;\n\nexport const StyledTruncatedTooltipText = styled(DSTruncatedTooltipText, {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.LABEL,\n})``;\n\nexport const Bar = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR,\n})`\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n overflow: hidden;\n`;\n\nexport const BarIndicator = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR_INDICATOR,\n})<DSIndeterminateProgressIndicatorT.Props>`\n height: ${({ theme }) => theme.space.xxxs};\n width: ${({ complete, failed, animated, processing, percent }) =>\n `${!complete && !failed && !animated && processing ? percent : 100}%`};\n ${({ theme, complete, failed, processing, animated, processingComplete, processingFail }) => {\n // Default\n if (!complete && !failed && !processing && !processingComplete && !processingFail)\n return css`\n background-color: ${theme.colors.neutral[500]};\n `;\n // Completed\n else if (complete && processing)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n else if (complete && !processingComplete && !processing)\n return css`\n background-color: ${theme.colors.success[900]};\n `;\n // Failed\n else if (failed && !processingFail && !processing)\n return css`\n background-color: #e34256;\n `;\n // Processing\n else if (processing) {\n if (animated) {\n return css`\n width: 100%;\n animation: ${IndeterminateAnimation(theme.colors.brand[500])} 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n return css`\n background-color: ${theme.colors.brand[500]};\n `;\n }\n // Processing -> Completed\n else if (processingComplete && !complete) {\n return css`\n width: 50%;\n animation: ${ProcessingSuccess} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n } else if (processingComplete && complete)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n // Processing -> Failed\n else if (processingFail && !failed)\n return css`\n width: 50%;\n animation: ${ProcessingFail} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n else if (processingFail && failed)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingFailEnd} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n }};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": "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",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -2,12 +2,12 @@ import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
3
3
|
import { useCallback } from "react";
|
4
4
|
import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
5
|
-
import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
6
5
|
import {
|
7
6
|
DSIndeterminateProgressIndicatorPropTypes
|
8
7
|
} from "./react-desc-prop-types.js";
|
9
8
|
import { useIndeterminateProgressIndicator } from "./config/useIndeterminateProgressIndicator.js";
|
10
9
|
import { DSIndeterminateProgressIndicatorName } from "./constants/index.js";
|
10
|
+
import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
11
11
|
import { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from "./styled.js";
|
12
12
|
const DSIndeterminateProgressIndicator = (props) => {
|
13
13
|
const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSIndeterminateProgressIndicator.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAcM,KAdN;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,wBAAwB,0BAA0B;AACrE
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from './styled.js';\n\nconst DSIndeterminateProgressIndicator: React.ComponentType<DSIndeterminateProgressIndicatorT.Props> = (props) => {\n const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);\n const {\n containerProps,\n complete,\n failed,\n processing,\n processingComplete,\n processingFail,\n animated,\n percent,\n lineOnly,\n } = propsWithDefault;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <Container\n aria-busy={processing}\n aria-label={label}\n aria-live=\"polite\"\n role=\"alert\"\n lineOnly={lineOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...globalAttributes}\n {...xstyledAttributes}\n {...containerProps}\n >\n {!lineOnly ? (\n <TooltipTextProvider>\n <StyledTruncatedTooltipText\n value={label}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </TooltipTextProvider>\n ) : null}\n <Bar getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <BarIndicator\n complete={complete}\n failed={failed}\n processing={processing}\n animated={animated}\n processingComplete={processingComplete}\n processingFail={processingFail}\n percent={percent}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Bar>\n </Container>\n );\n};\n\nDSIndeterminateProgressIndicator.displayName = DSIndeterminateProgressIndicatorName;\nconst IndeterminateProgressIndicatorWithSchema = describe(DSIndeterminateProgressIndicator);\nIndeterminateProgressIndicatorWithSchema.propTypes = DSIndeterminateProgressIndicatorPropTypes;\n\nexport { DSIndeterminateProgressIndicator, IndeterminateProgressIndicatorWithSchema };\nexport default DSIndeterminateProgressIndicator;\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAcM,KAdN;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,wBAAwB,0BAA0B;AACrE;AAAA,EACE;AAAA,OAEK;AACP,SAAS,yCAAyC;AAClD,SAAS,4CAA4C;AACrD,SAAS,2BAA2B;AACpC,SAAS,KAAK,cAAc,WAAW,kCAAkC;AAEzE,MAAM,mCAAiG,CAAC,UAAU;AAChH,QAAM,EAAE,kBAAkB,MAAM,IAAI,kCAAkC,KAAK;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,oBAAoB,mBAAmB,gBAAgB;AAC7D,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,SAAC,WACA,oBAAC,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ,oBAAC,OAAI,eAA8B,wBACjC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,cAAc;AAC/C,MAAM,2CAA2C,SAAS,gCAAgC;AAC1F,yCAAyC,YAAY;AAGrD,IAAO,2CAAQ;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
@@ -87,22 +87,22 @@ const BarIndicator = styled("div", {
|
|
87
87
|
return css`
|
88
88
|
background-color: ${theme.colors.neutral[500]};
|
89
89
|
`;
|
90
|
-
if (complete && processing)
|
90
|
+
else if (complete && processing)
|
91
91
|
return css`
|
92
92
|
width: 100%;
|
93
93
|
background-color: ${theme.colors.brand[500]};
|
94
94
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
95
95
|
animation-fill-mode: forwards;
|
96
96
|
`;
|
97
|
-
if (complete && !processingComplete && !processing)
|
97
|
+
else if (complete && !processingComplete && !processing)
|
98
98
|
return css`
|
99
99
|
background-color: ${theme.colors.success[900]};
|
100
100
|
`;
|
101
|
-
if (failed && !processingFail && !processing)
|
101
|
+
else if (failed && !processingFail && !processing)
|
102
102
|
return css`
|
103
103
|
background-color: #e34256;
|
104
104
|
`;
|
105
|
-
if (processing) {
|
105
|
+
else if (processing) {
|
106
106
|
if (animated) {
|
107
107
|
return css`
|
108
108
|
width: 100%;
|
@@ -113,37 +113,34 @@ const BarIndicator = styled("div", {
|
|
113
113
|
return css`
|
114
114
|
background-color: ${theme.colors.brand[500]};
|
115
115
|
`;
|
116
|
-
}
|
117
|
-
if (processingComplete && !complete) {
|
116
|
+
} else if (processingComplete && !complete) {
|
118
117
|
return css`
|
119
118
|
width: 50%;
|
120
119
|
animation: ${ProcessingSuccess} 4s infinite;
|
121
120
|
animation-fill-mode: forwards;
|
122
121
|
background-color: ${theme.colors.brand[500]};
|
123
122
|
`;
|
124
|
-
}
|
125
|
-
if (processingComplete && complete)
|
123
|
+
} else if (processingComplete && complete)
|
126
124
|
return css`
|
127
125
|
width: 100%;
|
128
126
|
background-color: ${theme.colors.brand[500]};
|
129
127
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
130
128
|
animation-fill-mode: forwards;
|
131
129
|
`;
|
132
|
-
if (processingFail && !failed)
|
130
|
+
else if (processingFail && !failed)
|
133
131
|
return css`
|
134
132
|
width: 50%;
|
135
133
|
animation: ${ProcessingFail} 4s infinite;
|
136
134
|
animation-fill-mode: forwards;
|
137
135
|
background-color: ${theme.colors.brand[500]};
|
138
136
|
`;
|
139
|
-
if (processingFail && failed)
|
137
|
+
else if (processingFail && failed)
|
140
138
|
return css`
|
141
139
|
width: 100%;
|
142
140
|
background-color: ${theme.colors.brand[500]};
|
143
141
|
animation: ${ProcessingFailEnd} 1s ease-in-out;
|
144
142
|
animation-fill-mode: forwards;
|
145
143
|
`;
|
146
|
-
return "";
|
147
144
|
}};
|
148
145
|
`;
|
149
146
|
export {
|
package/dist/esm/styled.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport {
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,MAAM,cAAc;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport { type DSIndeterminateProgressIndicatorT } from './react-desc-prop-types.js';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSIndeterminateProgressIndicatorName, DSIndeterminateProgressIndicatorSlots } from './constants/index.js';\n\nconst IndeterminateAnimation = (color: string) => kfrm`\n 0% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 25% {\n transform: scaleX(0.4);\n }\n 50% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 50.1% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n 75% {\n transform: scaleX(0.4);\n }\n 100% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n`;\n\nconst ProcessingSuccess = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingSuccessEnd = (color: string) => kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: ${color}; }\n`;\n\nconst ProcessingFail = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50%; }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingFailEnd = kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: #e34256; }\n`;\n\nexport const Container = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.ROOT,\n})<DSIndeterminateProgressIndicatorT.Props>`\n width: 100%;\n padding: ${({ theme, lineOnly }) => (lineOnly ? 0 : `${theme.space.xxs} ${theme.space.xs}`)};\n`;\n\nexport const StyledTruncatedTooltipText = styled(DSTruncatedTooltipText, {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.LABEL,\n})``;\n\nexport const Bar = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR,\n})`\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n overflow: hidden;\n`;\n\nexport const BarIndicator = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR_INDICATOR,\n})<DSIndeterminateProgressIndicatorT.Props>`\n height: ${({ theme }) => theme.space.xxxs};\n width: ${({ complete, failed, animated, processing, percent }) =>\n `${!complete && !failed && !animated && processing ? percent : 100}%`};\n ${({ theme, complete, failed, processing, animated, processingComplete, processingFail }) => {\n // Default\n if (!complete && !failed && !processing && !processingComplete && !processingFail)\n return css`\n background-color: ${theme.colors.neutral[500]};\n `;\n // Completed\n else if (complete && processing)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n else if (complete && !processingComplete && !processing)\n return css`\n background-color: ${theme.colors.success[900]};\n `;\n // Failed\n else if (failed && !processingFail && !processing)\n return css`\n background-color: #e34256;\n `;\n // Processing\n else if (processing) {\n if (animated) {\n return css`\n width: 100%;\n animation: ${IndeterminateAnimation(theme.colors.brand[500])} 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n return css`\n background-color: ${theme.colors.brand[500]};\n `;\n }\n // Processing -> Completed\n else if (processingComplete && !complete) {\n return css`\n width: 50%;\n animation: ${ProcessingSuccess} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n } else if (processingComplete && complete)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n // Processing -> Failed\n else if (processingFail && !failed)\n return css`\n width: 50%;\n animation: ${ProcessingFail} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n else if (processingFail && failed)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingFailEnd} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n }};\n`;\n"],
|
5
|
+
"mappings": "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",
|
6
6
|
"names": []
|
7
7
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@elliemae/ds-indeterminate-progress-indicator",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.56.0-rc.1",
|
4
4
|
"license": "MIT",
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
6
6
|
"files": [
|
@@ -36,16 +36,16 @@
|
|
36
36
|
"indent": 4
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@elliemae/ds-classnames": "3.
|
40
|
-
"@elliemae/ds-props-helpers": "3.
|
41
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
42
|
-
"@elliemae/ds-system": "3.
|
39
|
+
"@elliemae/ds-classnames": "3.56.0-rc.1",
|
40
|
+
"@elliemae/ds-props-helpers": "3.56.0-rc.1",
|
41
|
+
"@elliemae/ds-truncated-tooltip-text": "3.56.0-rc.1",
|
42
|
+
"@elliemae/ds-system": "3.56.0-rc.1"
|
43
43
|
},
|
44
44
|
"devDependencies": {
|
45
45
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
46
46
|
"jest": "~29.7.0",
|
47
47
|
"styled-components": "~5.3.9",
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.56.0-rc.1"
|
49
49
|
},
|
50
50
|
"peerDependencies": {
|
51
51
|
"react": "^18.3.1",
|