pge-front-common 14.1.30 → 14.1.32
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/lib/components/PaginationV2/index.d.ts +2 -1
- package/lib/components/PaginationV2/pagination.stories.d.ts +1 -0
- package/lib/components/PaginationV2/selectPagination.d.ts +2 -1
- package/lib/components/ProgressCircle/index.d.ts +1 -1
- package/lib/components/ProgressCircle/progressCircle.stories.d.ts +1 -0
- package/lib/components/ProgressCircle/progressCircle.types.d.ts +2 -0
- package/lib/index.d.ts +5 -2
- package/lib/index.esm.js +20 -15
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +20 -15
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -1276,15 +1276,16 @@ var PaginationTable = function (_a) {
|
|
|
1276
1276
|
React.createElement("button", { type: "button", className: "".concat(styles$k.paginationButton, " ").concat(currentPage === countPage ? styles$k.paginationButtonDisabled : ""), onClick: function () { return handleClickPage === null || handleClickPage === void 0 ? void 0 : handleClickPage(currentPage + 1); }, disabled: currentPage === countPage }, ">")))));
|
|
1277
1277
|
};
|
|
1278
1278
|
|
|
1279
|
-
var css_248z$k = ".styles-module__paginationContainer___FagFs {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px;\r\n border: 1px solid #d9d9d9;\r\n border-radius: 8px;\r\n font-size: var(--font-size-14);\r\n height: 61px;\r\n border-radius: 0px 0px 10px 10px;\r\n background-color: var(--background-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__paginationContainer___FagFs {\r\n font-size: var(--font-size-12);\r\n min-height: 50px;\r\n height: auto;\r\n padding: 6px 10px;\r\n } \r\n}\r\n\r\n.styles-module__labelItems___p-9pv {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__labelItems___p-9pv {\r\n display: none;\r\n }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapper___PTkJr {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__itemsPerPageWrapper___PTkJr {\r\n height: auto;\r\n }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapperSelect___gVLGU {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__navigationWrapper___lJ040 {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__navigationWrapper___lJ040 {\r\n height: auto;\r\n }\r\n}\r\n\r\n.styles-module__separatorItem___t-PSR {\r\n width: 1px;\r\n height: 50%;\r\n background-color: #cccccc;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__separatorItem___t-PSR {\r\n height: 25px;\r\n }\r\n}\r\n\r\n.styles-module__currentPage___SRV7Q {\r\n font-size: var(--font-size-16, 16px);\r\n font-weight: bold;\r\n margin: 0 5px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid #FFFFFF;\r\n background-color: transparent;\r\n color: var(--paginationv2-arrow-color);\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:first-of-type {\r\n border-top-left-radius: 4px;\r\n border-bottom-left-radius: 4px;\r\n margin-left: 10px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:last-of-type {\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* .navButton:hover:not(:disabled) {\r\n} */\r\n\r\n/* Select.module.css */\r\n.styles-module__selectContainerPagination___C-Epb {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 8px 12px;\r\n background: var(--paginationv2-selecttrigger-bg-color);\r\n border: 1px solid var(--paginationv2-selecttrigger-border-color);\r\n border-radius: 4px;\r\n cursor: default;\r\n gap: 12px;\r\n margin-right: 10px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__selectTrigger___A5PsD {\r\n padding: 4px 8px;\r\n }\r\n}\r\n\r\n.styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-selectedValue-color);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__icon___-BaZE {\r\n width: 10px;\r\n height: 18px;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.styles-module__iconOpen___Azg3S {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.styles-module__optionsList___Xs-ze {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n margin-top: 4px;\r\n background: var(--paginationv2-optionslist-bg-color);\r\n border: 1px solid #e1e1e1;\r\n border-radius: 4px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n z-index: 1000;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n width: fit-content;\r\n padding: 0;\r\n}\r\n\r\n.styles-module__option___riTqX {\r\n padding: 8px 12px;\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-optionslist-font-color);\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__option___riTqX:hover {\r\n background-color: var(--paginationv2-optionslist-hover-bg-color);\r\n}\r\n\r\n.styles-module__option___riTqX.styles-module__selected___6iUvP {\r\n background-color: var(--paginationv2-optionselect-bg-color);\r\n color: var(--paginationv2-optionselect-text-color);\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD:hover {\r\n border-color: var(--primary-color);\r\n}";
|
|
1280
|
-
var styles$j = {"paginationContainer":"styles-module__paginationContainer___FagFs","labelItems":"styles-module__labelItems___p-9pv","itemsPerPageWrapper":"styles-module__itemsPerPageWrapper___PTkJr","itemsPerPageWrapperSelect":"styles-module__itemsPerPageWrapperSelect___gVLGU","paginationInfo":"styles-module__paginationInfo___NrLda","navigationWrapper":"styles-module__navigationWrapper___lJ040","separatorItem":"styles-module__separatorItem___t-PSR","currentPage":"styles-module__currentPage___SRV7Q","navButton":"styles-module__navButton___pqOMS","selectContainerPagination":"styles-module__selectContainerPagination___C-Epb","selectTrigger":"styles-module__selectTrigger___A5PsD","selectedValue":"styles-module__selectedValue___S6skE","icon":"styles-module__icon___-BaZE","iconOpen":"styles-module__iconOpen___Azg3S","optionsList":"styles-module__optionsList___Xs-ze","option":"styles-module__option___riTqX","selected":"styles-module__selected___6iUvP"};
|
|
1279
|
+
var css_248z$k = ".styles-module__paginationContainer___FagFs {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px;\r\n border: 1px solid #d9d9d9;\r\n border-radius: 8px;\r\n font-size: var(--font-size-14);\r\n height: 61px;\r\n border-radius: 0px 0px 10px 10px;\r\n background-color: var(--background-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__paginationContainer___FagFs {\r\n font-size: var(--font-size-12);\r\n min-height: 50px;\r\n height: auto;\r\n padding: 6px 10px;\r\n } \r\n}\r\n\r\n.styles-module__labelItems___p-9pv {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__labelItems___p-9pv {\r\n display: none;\r\n }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapper___PTkJr {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__itemsPerPageWrapper___PTkJr {\r\n height: auto;\r\n }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapperSelect___gVLGU {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__navigationWrapper___lJ040 {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__navigationWrapper___lJ040 {\r\n height: auto;\r\n }\r\n}\r\n\r\n.styles-module__separatorItem___t-PSR {\r\n width: 1px;\r\n height: 50%;\r\n background-color: #cccccc;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__separatorItem___t-PSR {\r\n height: 25px;\r\n }\r\n}\r\n\r\n.styles-module__currentPage___SRV7Q {\r\n font-size: var(--font-size-16, 16px);\r\n font-weight: bold;\r\n margin: 0 5px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid #FFFFFF;\r\n background-color: transparent;\r\n color: var(--paginationv2-arrow-color);\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:first-of-type {\r\n border-top-left-radius: 4px;\r\n border-bottom-left-radius: 4px;\r\n margin-left: 10px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:last-of-type {\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* .navButton:hover:not(:disabled) {\r\n} */\r\n\r\n/* Select.module.css */\r\n.styles-module__selectContainerPagination___C-Epb {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 8px 12px;\r\n background: var(--paginationv2-selecttrigger-bg-color);\r\n border: 1px solid var(--paginationv2-selecttrigger-border-color);\r\n border-radius: 4px;\r\n cursor: default;\r\n gap: 12px;\r\n margin-right: 10px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__selectTrigger___A5PsD {\r\n padding: 4px 8px;\r\n }\r\n}\r\n\r\n.styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-selectedValue-color);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__icon___-BaZE {\r\n width: 10px;\r\n height: 18px;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.styles-module__iconOpen___Azg3S {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.styles-module__optionsList___Xs-ze {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n margin-top: 4px;\r\n background: var(--paginationv2-optionslist-bg-color);\r\n border: 1px solid #e1e1e1;\r\n border-radius: 4px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n z-index: 1000;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n width: fit-content;\r\n padding: 0;\r\n}\r\n\r\n.styles-module__optionsListUp___JurU2 {\r\n top: auto;\r\n bottom: 100%;\r\n margin-top: 0;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.styles-module__option___riTqX {\r\n padding: 8px 12px;\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-optionslist-font-color);\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__option___riTqX:hover {\r\n background-color: var(--paginationv2-optionslist-hover-bg-color);\r\n}\r\n\r\n.styles-module__option___riTqX.styles-module__selected___6iUvP {\r\n background-color: var(--paginationv2-optionselect-bg-color);\r\n color: var(--paginationv2-optionselect-text-color);\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD:hover {\r\n border-color: var(--primary-color);\r\n}";
|
|
1280
|
+
var styles$j = {"paginationContainer":"styles-module__paginationContainer___FagFs","labelItems":"styles-module__labelItems___p-9pv","itemsPerPageWrapper":"styles-module__itemsPerPageWrapper___PTkJr","itemsPerPageWrapperSelect":"styles-module__itemsPerPageWrapperSelect___gVLGU","paginationInfo":"styles-module__paginationInfo___NrLda","navigationWrapper":"styles-module__navigationWrapper___lJ040","separatorItem":"styles-module__separatorItem___t-PSR","currentPage":"styles-module__currentPage___SRV7Q","navButton":"styles-module__navButton___pqOMS","selectContainerPagination":"styles-module__selectContainerPagination___C-Epb","selectTrigger":"styles-module__selectTrigger___A5PsD","selectedValue":"styles-module__selectedValue___S6skE","icon":"styles-module__icon___-BaZE","iconOpen":"styles-module__iconOpen___Azg3S","optionsList":"styles-module__optionsList___Xs-ze","optionsListUp":"styles-module__optionsListUp___JurU2","option":"styles-module__option___riTqX","selected":"styles-module__selected___6iUvP"};
|
|
1281
1281
|
styleInject(css_248z$k);
|
|
1282
1282
|
|
|
1283
1283
|
var SelectPagination = function (_a) {
|
|
1284
|
-
var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? "" : _b;
|
|
1285
|
-
var
|
|
1284
|
+
var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.direction, direction = _c === void 0 ? "down" : _c;
|
|
1285
|
+
var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
|
|
1286
1286
|
var selectRef = React.useRef(null);
|
|
1287
1287
|
var selectedOption = options.find(function (opt) { return opt.value === value; });
|
|
1288
|
+
var displayOptions = direction === "up" ? __spreadArray([], options, true).reverse() : options;
|
|
1288
1289
|
React.useEffect(function () {
|
|
1289
1290
|
var handleClickOutside = function (event) {
|
|
1290
1291
|
if (selectRef.current &&
|
|
@@ -1310,7 +1311,7 @@ var SelectPagination = function (_a) {
|
|
|
1310
1311
|
} },
|
|
1311
1312
|
React.createElement("span", { className: styles$j.selectedValue }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.padStart(2, "0")),
|
|
1312
1313
|
React.createElement(IconTriangleRecall, { onClick: function () { return setIsOpen(!isOpen); }, className: "".concat(styles$j.icon, " ").concat(isOpen ? styles$j.iconOpen : ""), fill: "#005A92" })),
|
|
1313
|
-
isOpen && (React.createElement("div", { className: styles$j.optionsList },
|
|
1314
|
+
isOpen && (React.createElement("div", { className: "".concat(styles$j.optionsList, " ").concat(direction === "up" ? styles$j.optionsListUp : "") }, displayOptions.map(function (option) { return (React.createElement("div", { key: option.value, tabIndex: 0, className: "".concat(styles$j.option, " ").concat(option.value === value ? styles$j.selected : ""), onClick: function () { return handleSelect(option.value); }, onKeyDown: function (e) {
|
|
1314
1315
|
if (e.key === "Enter" || e.key === " ") {
|
|
1315
1316
|
e.preventDefault();
|
|
1316
1317
|
handleSelect(option.value);
|
|
@@ -1323,7 +1324,7 @@ var Pagination = function (_a) {
|
|
|
1323
1324
|
{ value: 10, label: "10" },
|
|
1324
1325
|
{ value: 20, label: "20" },
|
|
1325
1326
|
{ value: 50, label: "50" },
|
|
1326
|
-
] : _b;
|
|
1327
|
+
] : _b, _c = _a.dropdownDirection, dropdownDirection = _c === void 0 ? "down" : _c;
|
|
1327
1328
|
var generatePageOptions = function (totalPages) {
|
|
1328
1329
|
return Array.from({ length: totalPages }, function (_, index) { return ({
|
|
1329
1330
|
value: index + 1,
|
|
@@ -1336,14 +1337,14 @@ var Pagination = function (_a) {
|
|
|
1336
1337
|
React.createElement("label", { className: styles$j.labelItems, htmlFor: "itemsPerPage" }, "Exibir"),
|
|
1337
1338
|
React.createElement(SelectPagination, { value: itemsPerPage, options: defaultOptions, onChange: function (value) {
|
|
1338
1339
|
handleItemPorPage(Number(value));
|
|
1339
|
-
} })),
|
|
1340
|
+
}, direction: dropdownDirection })),
|
|
1340
1341
|
React.createElement("div", { className: styles$j.separatorItem }),
|
|
1341
1342
|
React.createElement("div", { className: styles$j.paginationInfo }, "".concat((currentPage - 1) * itemsPerPage + 1, "-").concat(Math.min(currentPage * itemsPerPage, totalItems), " de ").concat(totalItems, " itens"))),
|
|
1342
1343
|
React.createElement("div", { className: styles$j.navigationWrapper },
|
|
1343
1344
|
React.createElement("label", { className: styles$j.labelItems, htmlFor: "itemsPerPage" }, "P\u00E1gina"),
|
|
1344
1345
|
React.createElement(SelectPagination, { value: pagina, options: generatePageOptions(Math.ceil(totalItems / itemsPerPage)), onChange: function (value) {
|
|
1345
1346
|
handlePage(Number(value));
|
|
1346
|
-
} }),
|
|
1347
|
+
}, direction: dropdownDirection }),
|
|
1347
1348
|
React.createElement("div", { className: styles$j.separatorItem }),
|
|
1348
1349
|
React.createElement("button", { className: styles$j.navButton, onClick: handlePrevious, disabled: currentPage === 1, "aria-label": "P\u00E1gina anterior" },
|
|
1349
1350
|
React.createElement(IconArrowLeft, { fill: "currentColor" })),
|
|
@@ -24195,21 +24196,25 @@ var Switch = function (_a) {
|
|
|
24195
24196
|
React.createElement("rect", { x: "16.0645", y: "15.9998", width: "16", height: "16", rx: "8", transform: "rotate(179.527 16.0645 15.9998)", fill: "#A0A0A0" })))))));
|
|
24196
24197
|
};
|
|
24197
24198
|
|
|
24198
|
-
var css_248z$2 = ".progressCircle-module__overlay___BHoDf {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.progressCircle-module__modal___tI5Fh {\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n max-width: 220px;\r\n width: 100%;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 10px auto;\r\n}\r\n\r\n.progressCircle-module__progressRing___7xKz8 {\r\n transform: rotate(-90deg);\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.progressCircle-module__progressBackground___m6YDA,\r\n.progressCircle-module__progressForeground___NWZOt {\r\n fill: none;\r\n stroke-width: 4px;\r\n cx: 50;\r\n cy: 50;\r\n r: 46;\r\n}\r\n\r\n.progressCircle-module__progressBackground___m6YDA {\r\n stroke: rgba(0, 90, 146, 0.2);\r\n}\r\n\r\n.progressCircle-module__progressForeground___NWZOt {\r\n stroke: #005a92;\r\n stroke-linecap: round;\r\n transition: stroke-dashoffset 0.5s ease;\r\n stroke-dasharray: 289.03;\r\n stroke-dashoffset: 0;\r\n}\r\n\r\n/* ====== TAMANHOS ====== */\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__large___BZOsB {\r\n width: 110px;\r\n height: 110px;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__medium___dFw6V {\r\n width: 80px;\r\n height: 80px;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__small___Rgbob {\r\n width: 60px;\r\n height: 60px;\r\n}\r\n\r\n/* Oculta a porcentagem e o ícone de ampulheta para os tamanhos medium e small */\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__medium___dFw6V .progressCircle-module__percentageContainer___jYTsq,\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__small___Rgbob .progressCircle-module__percentageContainer___jYTsq {\r\n display: none;\r\n}\r\n\r\n.progressCircle-module__percentageContainer___jYTsq {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px 3px;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n white-space: nowrap;\r\n}\r\n\r\n.progressCircle-module__hourglass___zFV-l {\r\n width: 13px;\r\n height: 13px;\r\n color: rgba(74, 74, 75, 0.8);\r\n}\r\n\r\n.progressCircle-module__percentage___o-Lud {\r\n font-size: 1.85rem;\r\n font-weight: 400;\r\n color: #005a92;\r\n}\r\n\r\n.progressCircle-module__message___wvOdY {\r\n font-size: 1rem;\r\n font-weight: 400;\r\n color: #000000;\r\n margin-top: 10px;\r\n}\r\n";
|
|
24199
|
-
var styles$1 = {"overlay":"progressCircle-module__overlay___BHoDf","modal":"progressCircle-module__modal___tI5Fh","progressContainer":"progressCircle-module__progressContainer___52PeR","progressRing":"progressCircle-module__progressRing___7xKz8","progressBackground":"progressCircle-module__progressBackground___m6YDA","progressForeground":"progressCircle-module__progressForeground___NWZOt","large":"progressCircle-module__large___BZOsB","medium":"progressCircle-module__medium___dFw6V","small":"progressCircle-module__small___Rgbob","percentageContainer":"progressCircle-module__percentageContainer___jYTsq","hourglass":"progressCircle-module__hourglass___zFV-l","percentage":"progressCircle-module__percentage___o-Lud","message":"progressCircle-module__message___wvOdY"};
|
|
24199
|
+
var css_248z$2 = ".progressCircle-module__overlay___BHoDf {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.progressCircle-module__modal___tI5Fh {\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n max-width: 220px;\r\n width: 100%;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 10px auto;\r\n}\r\n\r\n.progressCircle-module__progressRing___7xKz8 {\r\n transform: rotate(-90deg);\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.progressCircle-module__progressBackground___m6YDA,\r\n.progressCircle-module__progressForeground___NWZOt {\r\n fill: none;\r\n stroke-width: 4px;\r\n cx: 50;\r\n cy: 50;\r\n r: 46;\r\n}\r\n\r\n.progressCircle-module__progressBackground___m6YDA {\r\n stroke: rgba(0, 90, 146, 0.2);\r\n}\r\n\r\n.progressCircle-module__progressForeground___NWZOt {\r\n stroke: #005a92;\r\n stroke-linecap: round;\r\n transition: stroke-dashoffset 0.5s ease;\r\n stroke-dasharray: 289.03;\r\n stroke-dashoffset: 0;\r\n}\r\n\r\n.progressCircle-module__progressForegroundInfinite___cGw1H {\r\n stroke-dasharray: 80 289.03;\r\n stroke-dashoffset: 0;\r\n}\r\n\r\n/* ====== TAMANHOS ====== */\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__large___BZOsB {\r\n width: 110px;\r\n height: 110px;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__medium___dFw6V {\r\n width: 80px;\r\n height: 80px;\r\n}\r\n\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__small___Rgbob {\r\n width: 60px;\r\n height: 60px;\r\n}\r\n\r\n/* Oculta a porcentagem e o ícone de ampulheta para os tamanhos medium e small */\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__medium___dFw6V .progressCircle-module__percentageContainer___jYTsq,\r\n.progressCircle-module__progressContainer___52PeR.progressCircle-module__small___Rgbob .progressCircle-module__percentageContainer___jYTsq {\r\n display: none;\r\n}\r\n\r\n.progressCircle-module__percentageContainer___jYTsq {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px 3px;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n white-space: nowrap;\r\n}\r\n\r\n.progressCircle-module__hourglass___zFV-l {\r\n width: 13px;\r\n height: 13px;\r\n color: rgba(74, 74, 75, 0.8);\r\n}\r\n\r\n.progressCircle-module__percentage___o-Lud {\r\n font-size: 1.85rem;\r\n font-weight: 400;\r\n color: #005a92;\r\n}\r\n\r\n.progressCircle-module__message___wvOdY {\r\n font-size: 1rem;\r\n font-weight: 400;\r\n color: #000000;\r\n margin-top: 10px;\r\n}\r\n\r\n.progressCircle-module__progressRingInfinite___6pmkX {\r\n transform-origin: 50% 50%;\r\n animation: progressCircle-module__rotateRing___IXx-n 1.2s linear infinite;\r\n}\r\n\r\n@keyframes progressCircle-module__rotateRing___IXx-n {\r\n 0% {\r\n transform: rotate(-90deg);\r\n }\r\n 100% {\r\n transform: rotate(270deg);\r\n }\r\n}\r\n";
|
|
24200
|
+
var styles$1 = {"overlay":"progressCircle-module__overlay___BHoDf","modal":"progressCircle-module__modal___tI5Fh","progressContainer":"progressCircle-module__progressContainer___52PeR","progressRing":"progressCircle-module__progressRing___7xKz8","progressBackground":"progressCircle-module__progressBackground___m6YDA","progressForeground":"progressCircle-module__progressForeground___NWZOt","progressForegroundInfinite":"progressCircle-module__progressForegroundInfinite___cGw1H","large":"progressCircle-module__large___BZOsB","medium":"progressCircle-module__medium___dFw6V","small":"progressCircle-module__small___Rgbob","percentageContainer":"progressCircle-module__percentageContainer___jYTsq","hourglass":"progressCircle-module__hourglass___zFV-l","percentage":"progressCircle-module__percentage___o-Lud","message":"progressCircle-module__message___wvOdY","progressRingInfinite":"progressCircle-module__progressRingInfinite___6pmkX","rotateRing":"progressCircle-module__rotateRing___IXx-n"};
|
|
24200
24201
|
styleInject(css_248z$2);
|
|
24201
24202
|
|
|
24202
24203
|
function ProgressCircle(_a) {
|
|
24203
|
-
var percentage = _a.percentage, message = _a.message, _b = _a.size, size = _b === void 0 ? "large" : _b, onClose = _a.onClose;
|
|
24204
|
+
var percentage = _a.percentage, message = _a.message, _b = _a.size, size = _b === void 0 ? "large" : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, _d = _a.isInProgress, isInProgress = _d === void 0 ? true : _d, onClose = _a.onClose;
|
|
24205
|
+
if (!isInProgress)
|
|
24206
|
+
return null;
|
|
24204
24207
|
return (React.createElement("div", { className: styles$1.overlay, onClick: onClose },
|
|
24205
24208
|
React.createElement("div", { className: styles$1.modal, onClick: function (e) { return e.stopPropagation(); } },
|
|
24206
24209
|
React.createElement("div", { className: "".concat(styles$1.progressContainer, " ").concat(styles$1[size]) },
|
|
24207
24210
|
React.createElement("svg", { className: styles$1.progressRing, viewBox: "0 0 100 100" },
|
|
24208
24211
|
React.createElement("circle", { className: styles$1.progressBackground, cx: "50", cy: "50", r: "46" }),
|
|
24209
|
-
React.createElement("circle", { className: styles$1.progressForeground, cx: "50", cy: "50", r: "46", style:
|
|
24210
|
-
|
|
24211
|
-
|
|
24212
|
-
|
|
24212
|
+
React.createElement("circle", { className: "".concat(styles$1.progressForeground, " ").concat(infinite ? styles$1.progressForegroundInfinite : "", " ").concat(infinite ? styles$1.progressRingInfinite : ""), cx: "50", cy: "50", r: "46", style: infinite
|
|
24213
|
+
? undefined
|
|
24214
|
+
: {
|
|
24215
|
+
strokeDasharray: "289.03",
|
|
24216
|
+
strokeDashoffset: "".concat(289.03 - (289.03 * percentage) / 100),
|
|
24217
|
+
} })),
|
|
24213
24218
|
size === "large" && (React.createElement("div", { className: styles$1.percentageContainer },
|
|
24214
24219
|
React.createElement(IconHourglass, { className: styles$1.hourglass }),
|
|
24215
24220
|
React.createElement("span", { className: styles$1.percentage },
|