pge-front-common 14.2.24 → 14.2.26

package/lib/index.js

@@ -620,6 +620,15 @@ var IconLista = function (_a) {
         React.createElement("path", { d: "M4 14H11V12H4V14ZM4 10H14V8H4V10ZM4 6H14V4H4V6ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM2 16H16V2H2V16Z", fill: "currentColor" })));
 };
 
+var IconLoadingProgress = function (_a) {
+    var _b = _a.spinning, spinning = _b === void 0 ? true : _b, className = _a.className, style = _a.style, props = __rest(_a, ["spinning", "className", "style"]);
+    return (React.createElement("svg", __assign({ width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: __assign({ color: "#005A92" }, style) }, props),
+        React.createElement("circle", { cx: "13", cy: "13", r: "11", stroke: "currentColor", strokeOpacity: 0.1, strokeWidth: "4", fill: "none" }),
+        React.createElement("g", null,
+            spinning ? (React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 13 13", to: "360 13 13", dur: "1s", repeatCount: "indefinite" })) : null,
+            React.createElement("path", { d: "M14.9121 2L15.849 2.2077L16.7642 2.49627L17.6508 2.8635L18.502 3.30661L19.3113 3.82221L20.0726 4.4064L20.7802 5.05471L21.4285 5.76222L22.0127 6.52355L22.5283 7.33289L22.9714 8.18408L23.3386 9.07066L23.6272 9.98588L23.8349 10.9228L23.9601 11.8742L24.002 12.8329L23.9601 13.7916L23.8349 14.743", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" }))));
+};
+
 var IconMedalha = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, props),
@@ -754,8 +763,8 @@ var PgeButton = React.forwardRef(function (_a, ref) {
 });
 PgeButton.displayName = "PgeButton";
 
-var css_248z$E = ".styles-module__container___9pLua {\r\n  width: 100%;\r\n  height: fit-content;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.styles-module__label___AWyTG {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-label);\r\n}\r\n\r\n.styles-module__labelUpload___LOAO- {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-label);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__label___AWyTG {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 600;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--color-label);\r\n  }\r\n\r\n  .styles-module__labelUpload___LOAO- {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--color-label);\r\n  }\r\n}\r\n\r\n.styles-module__inputContainer___tsCfV {\r\n  width: 100%;\r\n  height: 58px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 10px;\r\n  border: 2px dotted var(--upload-border-color, #005a9280);\r\n  border-radius: 16px;\r\n  padding: 10px;\r\n  margin-top: 5px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__inputContainer___tsCfV {\r\n    height: 52px;\r\n  }\r\n}\r\n\r\n.styles-module__button___1GicM {\r\n  width: fit-content;\r\n  height: 38px;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 7px 13px;\r\n  gap: 8px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  white-space: nowrap;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__button___1GicM {\r\n    min-width: 91px;\r\n    height: 32px;\r\n  }\r\n}\r\n\r\n.styles-module__hiddenInput___lDoAG {\r\n  display: none;\r\n}\r\n\r\n.styles-module__description___S1vZj {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--input-placeholder-focus);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__description___S1vZj {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--input-placeholder-focus);\r\n  }\r\n}\r\n\r\n.styles-module__instructionText___fa9r4 {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 500;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--foreground);\r\n}\r\n\r\n.styles-module__primary___AtNI- {\r\n  background-color: var(--btn-bg-primary-color);\r\n  color: var(--btn-text-primary-color);\r\n  border: none;\r\n}\r\n\r\n.styles-module__primary___AtNI-:hover {\r\n  background-color: var(--btn-bg-primary-color);\r\n  color: var(--btn-text-hover-primary-color);\r\n  outline: 3px solid var(--btn-bg-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:active {\r\n  border: 1.8px solid var(--Pressed-button, #3ab0f3);\r\n}\r\n\r\n.styles-module__primary___AtNI-:focus {\r\n  box-shadow: 0px 4px 4px 0px #00000040;\r\n  background: var(--btn-bg-focus-primary-color, #00436d);\r\n  color: var(--btn-text-focus-primary-color);\r\n  outline: 2px solid var(--btn-text-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:disabled {\r\n  background: var(--light-grey-color, #c3c3c3);\r\n  cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq {\r\n  border: 1px solid var(--btn-up-border-secondary-color);\r\n  background: var(--btn-up-bg-secondary-color);\r\n  color: var(--btn-up-text-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:hover {\r\n  background: var(--btn-up-bg-hover-secondary-color);\r\n  border: 1px solid var(--btn-up-border-secondary-color);\r\n  color: var(--btn-up-text-hover-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:active {\r\n  background: #00436d1a;\r\n  border: 2px solid #3ab0f3cc;\r\n}\r\n\r\n.styles-module__secondary___-anJq:focus {\r\n  background: var(--btn-up-bg-focus-secondary-color);\r\n  color: var(--btn-up-text-focus-secondary-color);\r\n  outline: 2.5px solid var(--btn-up-border-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:disabled {\r\n  border: 1px solid var(--light-grey-color, #c3c3c3);\r\n  color: var(--light-grey-color, #c3c3c3);\r\n  cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq.styles-module__danger___RwQhk {\r\n  border: 1px solid var(--btn-up-border-danger-secondary-color, #cb0a0a);\r\n  color: var(--btn-up-text-danger-secondary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__errorText___1LAhk {\r\n  font-size: var(--font-size-14);\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--alert-color);\r\n}\r\n\r\n.styles-module__successText___s1G4K {\r\n  font-size: var(--font-size-14);\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--success-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__errorText___1LAhk {\r\n    font-size: var(--font-size-10);\r\n  }\r\n\r\n  .styles-module__successText___s1G4K {\r\n    font-size: var(--font-size-10);\r\n  }\r\n}\r\n";
-var styles$A = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","labelUpload":"styles-module__labelUpload___LOAO-","inputContainer":"styles-module__inputContainer___tsCfV","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","instructionText":"styles-module__instructionText___fa9r4","primary":"styles-module__primary___AtNI-","secondary":"styles-module__secondary___-anJq","danger":"styles-module__danger___RwQhk","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
+var css_248z$E = ".styles-module__container___9pLua {\r\n  width: 100%;\r\n  height: fit-content;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.styles-module__label___AWyTG {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-label);\r\n}\r\n\r\n.styles-module__labelUpload___LOAO- {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-label);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__label___AWyTG {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 600;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--color-label);\r\n  }\r\n\r\n  .styles-module__labelUpload___LOAO- {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--color-label);\r\n  }\r\n}\r\n\r\n.styles-module__inputContainer___tsCfV {\r\n  width: 100%;\r\n  height: 58px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 10px;\r\n  border: 2px dotted var(--upload-border-color, #005a9280);\r\n  border-radius: 16px;\r\n  padding: 10px;\r\n  margin-top: 5px;\r\n}\r\n\r\n\r\n\r\n.styles-module__rightIcon___UN4xe {\r\n  margin-left: auto;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__inputContainer___tsCfV {\r\n    height: 52px;\r\n  }\r\n}\r\n\r\n.styles-module__button___1GicM {\r\n  width: fit-content;\r\n  height: 38px;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 7px 13px;\r\n  gap: 8px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  white-space: nowrap;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__button___1GicM {\r\n    min-width: 91px;\r\n    height: 32px;\r\n  }\r\n}\r\n\r\n.styles-module__hiddenInput___lDoAG {\r\n  display: none;\r\n}\r\n\r\n.styles-module__description___S1vZj {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--input-placeholder-focus);\r\n}\r\n\r\n.styles-module__linkDescription___T2DrY {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  text-decoration: underline;\r\n  color: var(--color-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__linkDescription___T2DrY:hover {\r\n  opacity: 0.75;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__description___S1vZj {\r\n    font-size: var(--font-size-12);\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n    text-align: left;\r\n    color: var(--input-placeholder-focus);\r\n  }\r\n}\r\n\r\n.styles-module__instructionText___fa9r4 {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 500;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--foreground);\r\n}\r\n\r\n.styles-module__primary___AtNI- {\r\n  background-color: var(--btn-bg-primary-color);\r\n  color: var(--btn-text-primary-color);\r\n  border: none;\r\n}\r\n\r\n.styles-module__primary___AtNI-:hover {\r\n  background-color: var(--btn-bg-primary-color);\r\n  color: var(--btn-text-hover-primary-color);\r\n  outline: 3px solid var(--btn-bg-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:active {\r\n  border: 1.8px solid var(--Pressed-button, #3ab0f3);\r\n}\r\n\r\n.styles-module__primary___AtNI-:focus {\r\n  box-shadow: 0px 4px 4px 0px #00000040;\r\n  background: var(--btn-bg-focus-primary-color, #00436d);\r\n  color: var(--btn-text-focus-primary-color);\r\n  outline: 2px solid var(--btn-text-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:disabled {\r\n  background: var(--light-grey-color, #c3c3c3);\r\n  cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq {\r\n  border: 1px solid var(--btn-up-border-secondary-color);\r\n  background: var(--btn-up-bg-secondary-color);\r\n  color: var(--btn-up-text-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:hover {\r\n  background: var(--btn-up-bg-hover-secondary-color);\r\n  border: 1px solid var(--btn-up-border-secondary-color);\r\n  color: var(--btn-up-text-hover-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:active {\r\n  background: #00436d1a;\r\n  border: 2px solid #3ab0f3cc;\r\n}\r\n\r\n.styles-module__secondary___-anJq:focus {\r\n  background: var(--btn-up-bg-focus-secondary-color);\r\n  color: var(--btn-up-text-focus-secondary-color);\r\n  outline: 2.5px solid var(--btn-up-border-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:disabled {\r\n  border: 1px solid var(--light-grey-color, #c3c3c3);\r\n  color: var(--light-grey-color, #c3c3c3);\r\n  cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq.styles-module__danger___RwQhk {\r\n  border: 1px solid var(--btn-up-border-danger-secondary-color, #cb0a0a);\r\n  color: var(--btn-up-text-danger-secondary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__errorText___1LAhk {\r\n  font-size: var(--font-size-14);\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--alert-color);\r\n}\r\n\r\n.styles-module__successText___s1G4K {\r\n  font-size: var(--font-size-14);\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--success-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__errorText___1LAhk {\r\n    font-size: var(--font-size-10);\r\n  }\r\n\r\n  .styles-module__successText___s1G4K {\r\n    font-size: var(--font-size-10);\r\n  }\r\n}\r\n";
+var styles$A = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","labelUpload":"styles-module__labelUpload___LOAO-","inputContainer":"styles-module__inputContainer___tsCfV","rightIcon":"styles-module__rightIcon___UN4xe","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","linkDescription":"styles-module__linkDescription___T2DrY","instructionText":"styles-module__instructionText___fa9r4","primary":"styles-module__primary___AtNI-","secondary":"styles-module__secondary___-anJq","danger":"styles-module__danger___RwQhk","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
 styleInject(css_248z$E);
 
 var parseSizeToBytes = function (size) {
@@ -779,14 +788,14 @@ var parseSizeToBytes = function (size) {
 };
 var FileUpload = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React.createElement(React.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g, _h = _a.noSelectedFileText, noSelectedFileText = _h === void 0 ? "Nenhum arquivo selecionado" : _h, _j = _a.helperText, helperText = _j === void 0 ? "" : _j, _k = _a.maxFileSize, maxFileSize = _k === void 0 ? "" : _k; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText", "noSelectedFileText", "helperText", "maxFileSize"]);
+    var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React.createElement(React.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g, _h = _a.noSelectedFileText, noSelectedFileText = _h === void 0 ? "Nenhum arquivo selecionado" : _h, _j = _a.helperText, helperText = _j === void 0 ? "" : _j, _k = _a.maxFileSize, maxFileSize = _k === void 0 ? "" : _k, _l = _a.rightIcon, rightIcon = _l === void 0 ? null : _l, _m = _a.isDownloadable, isDownloadable = _m === void 0 ? false : _m, onDownload = _a.onDownload; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText", "noSelectedFileText", "helperText", "maxFileSize", "rightIcon", "isDownloadable", "onDownload"]);
     var buttonClass = clsx(styles$A.labelUpload, styles$A.button, styles$A[variant], (_b = {},
         _b[styles$A.danger] = danger && variant !== "primary",
         _b), className);
     var inputId = React.useId();
     var helperId = React.useId();
     var errorId = React.useId();
-    var _l = React.useState(""), fileName = _l[0], setFileName = _l[1];
+    var _o = React.useState(""), fileName = _o[0], setFileName = _o[1];
     var fileInputRef = React.useRef(null);
     var handleFileChange = function (event) {
         var _a, _b;
@@ -839,7 +848,9 @@ var FileUpload = React.forwardRef(function (_a, ref) {
                 React.createElement(IconUploadFile, { "aria-hidden": "true" }),
                 descricaoLabel),
             React.createElement("input", { id: inputId, type: "file", ref: fileInputRef, className: styles$A.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(","), "aria-describedby": "".concat(helperId, " ").concat(errorText ? errorId : ""), "aria-label": "Campo de input para selecionar arquivo", "aria-invalid": !!errorText }),
-            React.createElement("span", { className: styles$A.description }, fileName || noSelectedFileText)),
+            React.createElement("span", { className: isDownloadable ? styles$A.linkDescription : styles$A.description, onClick: isDownloadable && onDownload ? onDownload : undefined, role: isDownloadable && onDownload ? "button" : undefined, tabIndex: isDownloadable && onDownload ? 0 : undefined, onKeyDown: isDownloadable && onDownload ? function (e) { if (e.key === "Enter" || e.key === " ")
+                    onDownload(); } : undefined }, fileName || noSelectedFileText),
+            rightIcon && (React.createElement("div", { className: styles$A.rightIcon }, rightIcon))),
         React.createElement("span", { id: errorText ? errorId : helperId, role: "alert", "aria-live": "polite", className: errorText
                 ? styles$A.errorText
                 : fileName
@@ -28032,6 +28043,7 @@ exports.IconInfoRound = IconInfoRound;
 exports.IconInvisibility = IconInvisibility;
 exports.IconLeftDirection = IconLeftDirection;
 exports.IconLista = IconLista;
+exports.IconLoadingProgress = IconLoadingProgress;
 exports.IconLogout = IconLogout;
 exports.IconMail = IconMail;
 exports.IconMedalha = IconMedalha;