pge-front-common 14.0.27 → 14.0.29
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/Upload/index.d.ts +4 -1
- package/lib/index.d.ts +4 -1
- package/lib/index.esm.js +27 -9
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +26 -8
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { UploadFileProps } from "./index.type";
|
|
3
|
-
export
|
|
3
|
+
export type FileUploadHandle = {
|
|
4
|
+
reset: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const FileUpload: React.ForwardRefExoticComponent<UploadFileProps & React.RefAttributes<FileUploadHandle>>;
|
package/lib/index.d.ts
CHANGED
|
@@ -78,7 +78,10 @@ interface UploadFileProps {
|
|
|
78
78
|
title?: string;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
type FileUploadHandle = {
|
|
82
|
+
reset: () => void;
|
|
83
|
+
};
|
|
84
|
+
declare const FileUpload: React__default.ForwardRefExoticComponent<UploadFileProps & React__default.RefAttributes<FileUploadHandle>>;
|
|
82
85
|
|
|
83
86
|
interface TooltipProps {
|
|
84
87
|
text: string;
|
package/lib/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { useState, useRef, useEffect, useId as useId$1, useCallback,
|
|
2
|
+
import React__default, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useId as useId$1, useCallback, useContext, useLayoutEffect, useMemo, createContext, Component, Fragment } from 'react';
|
|
3
3
|
import * as ReactDOM from 'react-dom';
|
|
4
4
|
import ReactDOM__default, { createPortal } from 'react-dom';
|
|
5
5
|
import { jsx as jsx$1, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
|
|
@@ -575,10 +575,11 @@ var css_248z$u = ".styles-module__container___9pLua {\r\n width: 100%;\r\n hei
|
|
|
575
575
|
var styles$r = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","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","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
|
|
576
576
|
styleInject(css_248z$u);
|
|
577
577
|
|
|
578
|
-
var FileUpload = function (_a) {
|
|
578
|
+
var FileUpload = forwardRef(function (_a, ref) {
|
|
579
579
|
var fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _b = _a.title, title = _b === void 0 ? "Upload de Arquivos:" : _b;
|
|
580
580
|
var _c = useState(null), file = _c[0], setFile = _c[1];
|
|
581
581
|
var _d = useState(""), error = _d[0], setError = _d[1];
|
|
582
|
+
var fileInputRef = useRef(null);
|
|
582
583
|
var handleFileChange = function (event) {
|
|
583
584
|
var _a, _b;
|
|
584
585
|
var selectedFile = ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
|
|
@@ -593,9 +594,22 @@ var FileUpload = function (_a) {
|
|
|
593
594
|
setFile(null);
|
|
594
595
|
setError("Os arquivos devem ser no formato ".concat(fileTypes.join(", ")));
|
|
595
596
|
onFileSelect(null);
|
|
597
|
+
if (fileInputRef.current) {
|
|
598
|
+
fileInputRef.current.value = "";
|
|
599
|
+
}
|
|
596
600
|
}
|
|
597
601
|
}
|
|
598
602
|
};
|
|
603
|
+
useImperativeHandle(ref, function () { return ({
|
|
604
|
+
reset: function () {
|
|
605
|
+
setFile(null);
|
|
606
|
+
setError("");
|
|
607
|
+
onFileSelect(null);
|
|
608
|
+
if (fileInputRef.current) {
|
|
609
|
+
fileInputRef.current.value = "";
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
}); });
|
|
599
613
|
return (React__default.createElement("div", { className: styles$r.container },
|
|
600
614
|
React__default.createElement("label", { className: styles$r.label },
|
|
601
615
|
title,
|
|
@@ -603,10 +617,14 @@ var FileUpload = function (_a) {
|
|
|
603
617
|
React__default.createElement("label", { className: styles$r.button },
|
|
604
618
|
React__default.createElement(IconUploadFile, null),
|
|
605
619
|
"Escolher arquivo",
|
|
606
|
-
React__default.createElement("input", { type: "file", className: styles$r.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(",") })),
|
|
607
|
-
React__default.createElement("span", { className: styles$r.description }, file ? file
|
|
608
|
-
React__default.createElement("p", { className: error
|
|
609
|
-
|
|
620
|
+
React__default.createElement("input", { type: "file", ref: fileInputRef, className: styles$r.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(",") })),
|
|
621
|
+
React__default.createElement("span", { className: styles$r.description }, file ? file.name : "Nenhum arquivo selecionado"))),
|
|
622
|
+
React__default.createElement("p", { className: error
|
|
623
|
+
? styles$r.errorText
|
|
624
|
+
: file
|
|
625
|
+
? styles$r.successText
|
|
626
|
+
: styles$r.instructionText }, error)));
|
|
627
|
+
});
|
|
610
628
|
|
|
611
629
|
var css_248z$t = ".styles-module__container___YGeVk {\r\n position: relative;\r\n display: flex;\r\n}\r\n\r\n.styles-module__tooltip___mnnfp {\r\n position: absolute;\r\n width: max-content;\r\n height: fit-content;\r\n max-width: 480px;\r\n border-radius: 8px;\r\n word-wrap: break-word;\r\n background: var(--background-color);\r\n padding: 10px;\r\n border: 1px solid #c3c3c3;\r\n z-index: 1000;\r\n}\r\n\r\n.styles-module__textContent___F6Omr {\r\n font-weight: 400;\r\n font-size: var(--font-size-14, 14px);\r\n line-height: 21px;\r\n color: var(--foreground);\r\n}\r\n\r\n.styles-module__top-right___KAK6B {\r\n bottom: 100%;\r\n left: 100%;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.styles-module__bottom-right___2qH8T {\r\n top: 100%;\r\n left: 100%;\r\n margin-top: 8px;\r\n}\r\n\r\n.styles-module__bottom-left___9jLIE {\r\n top: 100%;\r\n right: 100%;\r\n margin-top: 8px;\r\n}\r\n\r\n.styles-module__top-left___wu3BB {\r\n bottom: 100%;\r\n right: 100%;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.styles-module__mobile___jimue {\r\n bottom: 100%;\r\n left: 100%;\r\n margin-bottom: 8px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__container___YGeVk {\r\n position: static;\r\n }\r\n\r\n .styles-module__tooltip___mnnfp {\r\n width: max-content;\r\n max-width: 92vw;\r\n left: 0;\r\n bottom: 90%;\r\n text-align: start;\r\n padding: 10px;\r\n position: absolute;\r\n flex-wrap: wrap;\r\n border-radius: 8px;\r\n }\r\n\r\n .styles-module__textContent___F6Omr {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n";
|
|
612
630
|
var styles$q = {"container":"styles-module__container___YGeVk","tooltip":"styles-module__tooltip___mnnfp","textContent":"styles-module__textContent___F6Omr","top-right":"styles-module__top-right___KAK6B","bottom-right":"styles-module__bottom-right___2qH8T","bottom-left":"styles-module__bottom-left___9jLIE","top-left":"styles-module__top-left___wu3BB","mobile":"styles-module__mobile___jimue"};
|
|
@@ -674,7 +692,7 @@ var Tooltip$1 = function (_a) {
|
|
|
674
692
|
React__default.createElement("span", { className: styles$q.textContent }, text)))));
|
|
675
693
|
};
|
|
676
694
|
|
|
677
|
-
var css_248z$s = ".textarea-module__inputContainer___lpM5d {\r\n color: var(--color-input);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.textarea-module__label___qDTpX {\r\n color: var(--color-label);\r\n font-size: var(--font-size-16, 16px);\r\n font-weight: var(--input-font-weight);\r\n line-height: var(--input-line-height);\r\n width: 100%;\r\n}\r\n\r\n.textarea-module__labelRequired___bl2ew::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.textarea-module__labelError___f0hpM {\r\n color: var(--color-danger);\r\n}\r\n\r\n.textarea-module__inputWrapper___WFx7P {\r\n background-color: #fff;\r\n cursor: pointer;\r\n width: 100%;\r\n border-radius: var(--input-border-radius);\r\n border: var(--input-border);\r\n font-family:
|
|
695
|
+
var css_248z$s = ".textarea-module__inputContainer___lpM5d {\r\n color: var(--color-input);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.textarea-module__label___qDTpX {\r\n color: var(--color-label);\r\n font-size: var(--font-size-16, 16px);\r\n font-weight: var(--input-font-weight);\r\n line-height: var(--input-line-height);\r\n width: 100%;\r\n}\r\n\r\n.textarea-module__labelRequired___bl2ew::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.textarea-module__labelError___f0hpM {\r\n color: var(--color-danger);\r\n}\r\n\r\n.textarea-module__inputWrapper___WFx7P {\r\n background-color: #fff;\r\n cursor: pointer;\r\n width: 100%;\r\n border-radius: var(--input-border-radius);\r\n border: var(--input-border);\r\n font-family: var(--font-open-sans-serif);\r\n font-size: var(--input-font-size);\r\n font-weight: var(--input-font-weight);\r\n line-height: var(--input-line-height);\r\n text-align: left;\r\n}\r\n\r\n.textarea-module__inputWrapperError___0gA5w {\r\n border: var(--input-border-danger) !important;\r\n outline: var(--input-outline-danger) !important;\r\n}\r\n\r\n.textarea-module__inputWrapper___WFx7P:focus,\r\n.textarea-module__inputWrapper___WFx7P:focus-visible,\r\n.textarea-module__inputWrapper___WFx7P:focus-within {\r\n border: var(--input-border-focus);\r\n outline: var(--input-outline-focus);\r\n box-shadow: 0px 0px 0px 2px #0091ea80;\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc textarea {\r\n padding: 8px 0;\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 700;\r\n}\r\n\r\n.textarea-module__styledInput___fPp-f {\r\n color: var(--color-input);\r\n cursor: pointer;\r\n width: 100%;\r\n border: none;\r\n border-radius: 8px;\r\n padding: 8px 0;\r\n resize: none;\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc textarea::placeholder {\r\n font-weight: 700;\r\n color: var(--input-placeholder-color);\r\n font-size: var(--font-size-14, 14px);\r\n line-height: 24px;\r\n font-family: var(--font-open-sans-serif);\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc textarea:focus {\r\n color: var(--input-placeholder-focus, #303030cc);\r\n outline: none;\r\n border: 1px solid #1a95b0;\r\n box-shadow: 0px 0px 0px 2px #0091ea80;\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 700;\r\n background-color: var(--input-bg-color);\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc textarea:disabled {\r\n background-color: #eeeeee;\r\n border-radius: 8px;\r\n cursor: not-allowed;\r\n}\r\n\r\n.textarea-module__styledInput___fPp-f:focus,\r\n.textarea-module__styledInput___fPp-f:focus-visible,\r\n.textarea-module__styledInput___fPp-f:focus-within {\r\n outline: none;\r\n}\r\n\r\n.textarea-module__message___ys-dL {\r\n color: var(--color-label);\r\n margin-left: 8px;\r\n font-family: var(--font-open-sans-serif);\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 15px;\r\n text-align: left;\r\n}\r\n\r\n.textarea-module__messageError___ubeLK {\r\n color: var(--color-danger);\r\n}\r\n\r\n.textarea-module__inputContent___kdVmc svg {\r\n padding-left: 8px;\r\n}\r\n";
|
|
678
696
|
var styles$p = {"inputContainer":"textarea-module__inputContainer___lpM5d","label":"textarea-module__label___qDTpX","labelRequired":"textarea-module__labelRequired___bl2ew","labelError":"textarea-module__labelError___f0hpM","inputWrapper":"textarea-module__inputWrapper___WFx7P","inputWrapperError":"textarea-module__inputWrapperError___0gA5w","inputContent":"textarea-module__inputContent___kdVmc","styledInput":"textarea-module__styledInput___fPp-f","message":"textarea-module__message___ys-dL","messageError":"textarea-module__messageError___ubeLK"};
|
|
679
697
|
styleInject(css_248z$s);
|
|
680
698
|
|
|
@@ -967,7 +985,7 @@ var Header = function (_a) {
|
|
|
967
985
|
React__default.createElement(UserButtonComponent, null)))));
|
|
968
986
|
};
|
|
969
987
|
|
|
970
|
-
var css_248z$l = ".styles-module__container___FWA4h {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n}\r\n\r\n.styles-module__imgContainer___d-9G4 {\r\n width: 100%;\r\n max-width: 1440px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.styles-module__footerImg___Timhg {\r\n width: 100%;\r\n max-width: 1440px;\r\n height: 198px;\r\n object-fit: contain;\r\n}\r\n\r\n.styles-module__footer___em-xX {\r\n width: 100%;\r\n max-width: 1440px;\r\n height:
|
|
988
|
+
var css_248z$l = ".styles-module__container___FWA4h {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n}\r\n\r\n.styles-module__imgContainer___d-9G4 {\r\n width: 100%;\r\n max-width: 1440px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.styles-module__footerImg___Timhg {\r\n width: 100%;\r\n max-width: 1440px;\r\n height: 198px;\r\n object-fit: contain;\r\n}\r\n\r\n.styles-module__footer___em-xX {\r\n width: 100%;\r\n max-width: 1440px;\r\n height: 221px;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n background-position: center bottom;\r\n margin: 0 auto; /* Center the container */\r\n background-color: transparent;\r\n margin-bottom: -9px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__footer___em-xX {\r\n margin-bottom: -3px;\r\n height: 63px;\r\n padding: 0px 16px;\r\n }\r\n\r\n .styles-module__footer___em-xX.styles-module__dark___RwoTf {\r\n margin-bottom: -3px;\r\n height: 63px;\r\n padding: 0px 16px;\r\n }\r\n}\r\n\r\n.styles-module__pgeLogoContainer___hF2j3 {\r\n width: 100%;\r\n height: 134px;\r\n background-color: var(--footer-bg-color);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__pgeLogoContainer___hF2j3 {\r\n height: 118px;\r\n }\r\n}\r\n\r\n.styles-module__pgeLogo___b7X5k {\r\n width: 240px;\r\n height: 86px;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n background-position: center bottom;\r\n margin: 0 auto;\r\n}\r\n\r\n.styles-module__copyrightContainer___mh-Zd {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n background-color: #000;\r\n min-height: 46px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__copyrightContainer___mh-Zd {\r\n padding-top: 5px;\r\n padding-bottom: 5px;\r\n min-height: 30px;\r\n }\r\n}\r\n\r\n.styles-module__copyrightText___U8iv8 {\r\n font-weight: 400;\r\n font-size: var(--font-size-12, 12px);\r\n line-height: 16.34px;\r\n letter-spacing: 0%;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n\r\n.styles-module__footerAddress___wdcT4 {\r\n display: flex;\r\n margin: 0;\r\n justify-content: center;\r\n color: var(--background-color);\r\n font-size: var(--font-size-12);\r\n background-color: var(--footer-bg-color);\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n color: #fff;\r\n}\r\n";
|
|
971
989
|
var styles$i = {"container":"styles-module__container___FWA4h","imgContainer":"styles-module__imgContainer___d-9G4","footerImg":"styles-module__footerImg___Timhg","footer":"styles-module__footer___em-xX","dark":"styles-module__dark___RwoTf","pgeLogoContainer":"styles-module__pgeLogoContainer___hF2j3","pgeLogo":"styles-module__pgeLogo___b7X5k","copyrightContainer":"styles-module__copyrightContainer___mh-Zd","copyrightText":"styles-module__copyrightText___U8iv8","footerAddress":"styles-module__footerAddress___wdcT4"};
|
|
972
990
|
styleInject(css_248z$l);
|
|
973
991
|
|
|
@@ -23685,7 +23703,7 @@ var TableFooter = function (_a) {
|
|
|
23685
23703
|
return (React__default.createElement("tfoot", __assign({ className: "".concat(styles.tableFooter) }, props), children));
|
|
23686
23704
|
};
|
|
23687
23705
|
|
|
23688
|
-
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nbutton,\r\ninput {\r\n font-family: var(--font-open-sans-serif);\r\n}\r\n\r\n:root {\r\n --font-scale: 0px;\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n --color-weaker-blue: #52819e;\r\n --color-dark-gray: #363632;\r\n --color-gray-medium: #495057;\r\n --color-red-light: #dc354580;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 24px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n\r\n /* Font sizes */\r\n --font-size-32: calc(32px + var(--font-scale));\r\n --font-size-24: calc(24px + var(--font-scale));\r\n --font-size-20: calc(20px + var(--font-scale));\r\n --font-size-16: calc(16px + var(--font-scale));\r\n --font-size-14: calc(14px + var(--font-scale));\r\n --font-size-12: calc(12px + var(--font-scale));\r\n --font-size-10: calc(10px + var(--font-scale));\r\n\r\n /* Theming colors */\r\n --background-color: #fff;\r\n --foreground: #303030;\r\n --success-color: #198754;\r\n --warning-color: #cb8700;\r\n --alert-color: #cb0a0a;\r\n --information-color: #005A92D9;\r\n\r\n /* Input variables */\r\n --input-placeholder-focus: #303030cc;\r\n --input-placeholder-color: #30303066;\r\n --input-bg-color: #fff;\r\n --input-disabled-bg-color: #eeeeee;\r\n\r\n --primary-color: #005a92;\r\n --pge-gold: #bb9b32;\r\n --hover-color: #00436d;\r\n --icon-color: #4a4a4b;\r\n --border-color: #d9d9d9;\r\n --light-grey-color: #c3c3c3;\r\n --grey-color: #a0a0a0;\r\n\r\n /* Primary Button specific variables */\r\n --btn-bg-primary-color: #005a92;\r\n --btn-text-primary-color: #fff;\r\n --btn-text-hover-primary-color: #fff;\r\n --btn-bg-focus-primary-color: #00436d;\r\n --btn-text-focus-primary-color: #fff;\r\n\r\n /* Secondary Button specific variables */\r\n --btn-bg-secondary-color: #fff;\r\n --btn-bg-hover-secondary-color: #00436d1a;\r\n --btn-text-secondary-color: #00436d;\r\n --btn-text-hover-secondary-color: #005a92;\r\n --btn-bg-focus-secondary-color: #52819e40;\r\n --btn-text-focus-secondary-color: #005a92;\r\n --btn-border-secondary-color: #52819e;\r\n --btn-text-danger-secondary-color: #ff5858;\r\n --btn-border-danger-secondary-color: #ff5858;\r\n\r\n /* Tertiary Button specific variables */\r\n --btn-bg-tertiary-color: transparent;\r\n --btn-bg-hover-tertiary-color: transparent;\r\n --btn-text-tertiary-color: #005a92;\r\n --btn-text-hover-tertiary-color: #005a92;\r\n --btn-bg-focus-tertiary-color: #0b81ca47;\r\n --btn-text-focus-tertiary-color: #005a92;\r\n --btn-border-tertiary-color: #52819e;\r\n --btn-text-danger-tertiary-color: #ff5858;\r\n --btn-border-danger-tertiary-color: #ff5858;\r\n\r\n /* Header variables */\r\n --header-bg-main-color: #fff;\r\n --header-logout-btn-color: #005a92;\r\n --header-logout-icon-color: #005a92;\r\n --header-menu-icon-color: #005a92;\r\n --header-bg-dropdown: #fff;\r\n --header-font-dropdown: #303030;\r\n --header-hover-dropdown: #005a921a;\r\n\r\n /* Checkbox variables */\r\n --checkbox-bg-main-color: #ffffff;\r\n --checkbox-border-color: #c3c3c3;\r\n --checkbox-hover-bg-color: #005a921a;\r\n --checkbox-checked-bg-color: #005a92;\r\n --checkbox-checked-border-color: #005a92;\r\n --checkbox-checked-hover-bg-color: #005a92;\r\n --checkbox-checked-hover-border-color: #005a92;\r\n --checkbox-focus-box-shadow-color: #5e92b3;\r\n --checkbox-disabled-bg-color: #a0a0a01a;\r\n\r\n /* PaginationV2 variables */\r\n --paginationv2-arrow-color: #005a92;\r\n --paginationv2-selecttrigger-bg-color: #fff;\r\n --paginationv2-selectedValue-color: #303030b2;\r\n --paginationv2-selecttrigger-border-color: #dee2e6;\r\n --paginationv2-optionslist-bg-color: #fff;\r\n --paginationv2-optionslist-font-color: #333;\r\n --paginationv2-optionslist-hover-bg-color: #f5f5f5;\r\n --paginationv2-optionselect-bg-color: #e6f3f9;\r\n --paginationv2-optionselect-text-color: #005a92;\r\n\r\n /* Informative box */\r\n --bg-informative-success: #1987541a;\r\n --bg-informative-alert: #cb0a0a1a;\r\n --bg-informative-warning: #cb87001a;\r\n --bg-informative: #005a9214;\r\n\r\n --footer-bg-color: #005a92;\r\n\r\n /* Modal */\r\n --modal-header-bg-color: #005a92;\r\n}\r\n\r\n/* TO-DO ajustar componentes para aplicar o dark mode */\r\n\r\n/* @media (prefers-color-scheme: dark) {\r\n html {\r\n color-scheme: dark;\r\n }\r\n\r\n :root {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n }\r\n \r\n} */\r\n\r\n.dark-mode {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n --color-label: #fff;\r\n\r\n /* Button specific variables */\r\n --btn-bg-primary-color: #fff;\r\n --btn-text-primary-color: #005a92;\r\n --btn-text-hover-primary-color: #005a92;\r\n --btn-bg-focus-primary-color: #00436d;\r\n --btn-text-focus-primary-color: #fff;\r\n\r\n /* Secondary Button specific variables */\r\n --btn-bg-secondary-color: #000;\r\n --btn-bg-hover-secondary-color: #fff;\r\n --btn-text-secondary-color: #fff;\r\n --btn-text-hover-secondary-color: #000;\r\n --btn-bg-focus-secondary-color: #415474;\r\n --btn-text-focus-secondary-color: #fff;\r\n --btn-border-secondary-color: #fff;\r\n --btn-bg-danger-secondary-color: #000;\r\n --btn-text-danger-secondary-color: #ff5858;\r\n --btn-border-danger-secondary-color: #ff5858;\r\n\r\n /* Tertiary Button specific variables */\r\n --btn-bg-tertiary-color: transparent;\r\n --btn-bg-hover-tertiary-color: #415474;\r\n --btn-text-tertiary-color: #fff;\r\n --btn-text-hover-tertiary-color: #005a92;\r\n --btn-bg-focus-tertiary-color: #415474;\r\n --btn-text-focus-tertiary-color: #005a92;\r\n --btn-border-tertiary-color: #52819e;\r\n --btn-text-danger-tertiary-color: #ff5858;\r\n --btn-border-danger-tertiary-color: #ff5858;\r\n\r\n /* Input variables */\r\n --input-placeholder-color: #fff;\r\n --input-placeholder-focus: #fff;\r\n --input-bg-color: #2d2d2e;\r\n --input-disabled-bg-color: #4b4b4c;\r\n\r\n /* Table variables */\r\n --background-color-table-primary: #303030;\r\n --background-color-table-secondary: #4b4b4c;\r\n\r\n /* Header variables */\r\n --header-bg-main-color: #4a4a4a;\r\n --header-logout-btn-color: #fff;\r\n --header-logout-icon-color: #fff;\r\n --header-menu-icon-color: #fff;\r\n --header-bg-dropdown: #303030;\r\n --header-font-dropdown: #fff;\r\n --header-hover-dropdown: #4a4a4b;\r\n\r\n /* Checkbox variables */\r\n --checkbox-bg-main-color: #ffffff;\r\n --checkbox-border-color: #c3c3c3;\r\n --checkbox-hover-bg-color: #ffffff;\r\n --checkbox-checked-bg-color: #ffffff;\r\n --checkbox-checked-border-color: #ffffff;\r\n --checkbox-checked-hover-bg-color: #ffffff;\r\n --checkbox-checked-hover-border-color: #ffffff;\r\n --checkbox-focus-box-shadow-color: #d9d9d980;\r\n --checkbox-disabled-bg-color: #a0a0a01a;\r\n --checkbox-icon-color: invert(1);\r\n\r\n /* PaginationV2 variables */\r\n --paginationv2-arrow-color: #ffffff;\r\n --paginationv2-selecttrigger-bg-color: #ffffff;\r\n --paginationv2-selectedValue-color: #303030;\r\n --paginationv2-selecttrigger-border-color: #d9d9d9fc;\r\n --paginationv2-optionslist-bg-color: #4b4b4c;\r\n --paginationv2-optionslist-font-color: #fff;\r\n --paginationv2-optionslist-hover-bg-color: #303030;\r\n --paginationv2-optionselect-bg-color: #2a2a2b;\r\n --paginationv2-optionselect-text-color: #fff;\r\n\r\n /* Informative box */\r\n --bg-informative-success: #303030;\r\n --bg-informative-alert: #303030;\r\n --bg-informative-warning: #303030;\r\n --bg-informative: #303030;\r\n\r\n --footer-bg-color: #000;\r\n\r\n /* Modal */\r\n --modal-header-bg-color: #4a4a4a;\r\n}\r\n\r\n::placeholder {\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n:-ms-input-placeholder {\r\n /* Para Internet Explorer 10-11 */\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n::-ms-input-placeholder {\r\n /* Para Microsoft Edge */\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n/* Sobreescrevendo propriedades do input date, da lib prime react */\r\n\r\n.p-component {\r\n border-right: none;\r\n font-family: var(--font-open-sans-serif) !important;\r\n font-weight: 700;\r\n color: var(--input-placeholder-color);\r\n font-size: var(--font-size-14, 14px);\r\n line-height: 24px;\r\n}\r\n.p-inputwrapper {\r\n width: 100% !important;\r\n}\r\n\r\n.p-button-icon-only {\r\n background-color: white !important;\r\n box-shadow: none !important;\r\n border-top: 1px solid #d1d5db;\r\n border-right: 1px solid #d1d5db;\r\n border-bottom: 1px solid #d1d5db;\r\n border-left: none;\r\n border-top-right-radius: 6px;\r\n border-bottom-right-radius: 6px;\r\n max-width: 50px;\r\n}\r\n\r\n.buttoFocus {\r\n outline: 0 none;\r\n outline-offset: 0;\r\n box-shadow: 0 0 0 0.2rem #a5f3fc !important;\r\n border-color: #06b6d4;\r\n}\r\n\r\n.buttoInvalid {\r\n border-color: red !important;\r\n}\r\n\r\n.buttonHover {\r\n border-color: #06b6d4;\r\n}\r\n";
|
|
23706
|
+
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nbutton,\r\ninput,\r\ntextarea {\r\n font-family: var(--font-open-sans-serif);\r\n}\r\n\r\n:root {\r\n --font-scale: 0px;\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n --color-weaker-blue: #52819e;\r\n --color-dark-gray: #363632;\r\n --color-gray-medium: #495057;\r\n --color-red-light: #dc354580;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 24px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n\r\n /* Font sizes */\r\n --font-size-32: calc(32px + var(--font-scale));\r\n --font-size-24: calc(24px + var(--font-scale));\r\n --font-size-20: calc(20px + var(--font-scale));\r\n --font-size-16: calc(16px + var(--font-scale));\r\n --font-size-14: calc(14px + var(--font-scale));\r\n --font-size-12: calc(12px + var(--font-scale));\r\n --font-size-10: calc(10px + var(--font-scale));\r\n\r\n /* Theming colors */\r\n --background-color: #fff;\r\n --foreground: #303030;\r\n --success-color: #198754;\r\n --warning-color: #cb8700;\r\n --alert-color: #cb0a0a;\r\n --information-color: #005a92d9;\r\n\r\n /* Input variables */\r\n --input-placeholder-focus: #303030cc;\r\n --input-placeholder-color: #30303066;\r\n --input-bg-color: #fff;\r\n --input-disabled-bg-color: #eeeeee;\r\n\r\n --primary-color: #005a92;\r\n --pge-gold: #bb9b32;\r\n --hover-color: #00436d;\r\n --icon-color: #4a4a4b;\r\n --border-color: #d9d9d9;\r\n --light-grey-color: #c3c3c3;\r\n --grey-color: #a0a0a0;\r\n\r\n /* Primary Button specific variables */\r\n --btn-bg-primary-color: #005a92;\r\n --btn-text-primary-color: #fff;\r\n --btn-text-hover-primary-color: #fff;\r\n --btn-bg-focus-primary-color: #00436d;\r\n --btn-text-focus-primary-color: #fff;\r\n\r\n /* Secondary Button specific variables */\r\n --btn-bg-secondary-color: #fff;\r\n --btn-bg-hover-secondary-color: #00436d1a;\r\n --btn-text-secondary-color: #00436d;\r\n --btn-text-hover-secondary-color: #005a92;\r\n --btn-bg-focus-secondary-color: #52819e40;\r\n --btn-text-focus-secondary-color: #005a92;\r\n --btn-border-secondary-color: #52819e;\r\n --btn-text-danger-secondary-color: #ff5858;\r\n --btn-border-danger-secondary-color: #ff5858;\r\n\r\n /* Tertiary Button specific variables */\r\n --btn-bg-tertiary-color: transparent;\r\n --btn-bg-hover-tertiary-color: transparent;\r\n --btn-text-tertiary-color: #005a92;\r\n --btn-text-hover-tertiary-color: #005a92;\r\n --btn-bg-focus-tertiary-color: #0b81ca47;\r\n --btn-text-focus-tertiary-color: #005a92;\r\n --btn-border-tertiary-color: #52819e;\r\n --btn-text-danger-tertiary-color: #ff5858;\r\n --btn-border-danger-tertiary-color: #ff5858;\r\n\r\n /* Header variables */\r\n --header-bg-main-color: #fff;\r\n --header-logout-btn-color: #005a92;\r\n --header-logout-icon-color: #005a92;\r\n --header-menu-icon-color: #005a92;\r\n --header-bg-dropdown: #fff;\r\n --header-font-dropdown: #303030;\r\n --header-hover-dropdown: #005a921a;\r\n\r\n /* Checkbox variables */\r\n --checkbox-bg-main-color: #ffffff;\r\n --checkbox-border-color: #c3c3c3;\r\n --checkbox-hover-bg-color: #005a921a;\r\n --checkbox-checked-bg-color: #005a92;\r\n --checkbox-checked-border-color: #005a92;\r\n --checkbox-checked-hover-bg-color: #005a92;\r\n --checkbox-checked-hover-border-color: #005a92;\r\n --checkbox-focus-box-shadow-color: #5e92b3;\r\n --checkbox-disabled-bg-color: #a0a0a01a;\r\n\r\n /* PaginationV2 variables */\r\n --paginationv2-arrow-color: #005a92;\r\n --paginationv2-selecttrigger-bg-color: #fff;\r\n --paginationv2-selectedValue-color: #303030b2;\r\n --paginationv2-selecttrigger-border-color: #dee2e6;\r\n --paginationv2-optionslist-bg-color: #fff;\r\n --paginationv2-optionslist-font-color: #333;\r\n --paginationv2-optionslist-hover-bg-color: #f5f5f5;\r\n --paginationv2-optionselect-bg-color: #e6f3f9;\r\n --paginationv2-optionselect-text-color: #005a92;\r\n\r\n /* Informative box */\r\n --bg-informative-success: #1987541a;\r\n --bg-informative-alert: #cb0a0a1a;\r\n --bg-informative-warning: #cb87001a;\r\n --bg-informative: #005a9214;\r\n\r\n --footer-bg-color: #005a92;\r\n\r\n /* Modal */\r\n --modal-header-bg-color: #005a92;\r\n}\r\n\r\n/* TO-DO ajustar componentes para aplicar o dark mode */\r\n\r\n/* @media (prefers-color-scheme: dark) {\r\n html {\r\n color-scheme: dark;\r\n }\r\n\r\n :root {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n }\r\n \r\n} */\r\n\r\n.dark-mode {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n --color-label: #fff;\r\n\r\n /* Button specific variables */\r\n --btn-bg-primary-color: #fff;\r\n --btn-text-primary-color: #005a92;\r\n --btn-text-hover-primary-color: #005a92;\r\n --btn-bg-focus-primary-color: #00436d;\r\n --btn-text-focus-primary-color: #fff;\r\n\r\n /* Secondary Button specific variables */\r\n --btn-bg-secondary-color: #000;\r\n --btn-bg-hover-secondary-color: #fff;\r\n --btn-text-secondary-color: #fff;\r\n --btn-text-hover-secondary-color: #000;\r\n --btn-bg-focus-secondary-color: #415474;\r\n --btn-text-focus-secondary-color: #fff;\r\n --btn-border-secondary-color: #fff;\r\n --btn-bg-danger-secondary-color: #000;\r\n --btn-text-danger-secondary-color: #ff5858;\r\n --btn-border-danger-secondary-color: #ff5858;\r\n\r\n /* Tertiary Button specific variables */\r\n --btn-bg-tertiary-color: transparent;\r\n --btn-bg-hover-tertiary-color: #415474;\r\n --btn-text-tertiary-color: #fff;\r\n --btn-text-hover-tertiary-color: #005a92;\r\n --btn-bg-focus-tertiary-color: #415474;\r\n --btn-text-focus-tertiary-color: #005a92;\r\n --btn-border-tertiary-color: #52819e;\r\n --btn-text-danger-tertiary-color: #ff5858;\r\n --btn-border-danger-tertiary-color: #ff5858;\r\n\r\n /* Input variables */\r\n --input-placeholder-color: #fff;\r\n --input-placeholder-focus: #fff;\r\n --input-bg-color: #2d2d2e;\r\n --input-disabled-bg-color: #4b4b4c;\r\n\r\n /* Table variables */\r\n --background-color-table-primary: #303030;\r\n --background-color-table-secondary: #4b4b4c;\r\n\r\n /* Header variables */\r\n --header-bg-main-color: #4a4a4a;\r\n --header-logout-btn-color: #fff;\r\n --header-logout-icon-color: #fff;\r\n --header-menu-icon-color: #fff;\r\n --header-bg-dropdown: #303030;\r\n --header-font-dropdown: #fff;\r\n --header-hover-dropdown: #4a4a4b;\r\n\r\n /* Checkbox variables */\r\n --checkbox-bg-main-color: #ffffff;\r\n --checkbox-border-color: #c3c3c3;\r\n --checkbox-hover-bg-color: #ffffff;\r\n --checkbox-checked-bg-color: #ffffff;\r\n --checkbox-checked-border-color: #ffffff;\r\n --checkbox-checked-hover-bg-color: #ffffff;\r\n --checkbox-checked-hover-border-color: #ffffff;\r\n --checkbox-focus-box-shadow-color: #d9d9d980;\r\n --checkbox-disabled-bg-color: #a0a0a01a;\r\n --checkbox-icon-color: invert(1);\r\n\r\n /* PaginationV2 variables */\r\n --paginationv2-arrow-color: #ffffff;\r\n --paginationv2-selecttrigger-bg-color: #ffffff;\r\n --paginationv2-selectedValue-color: #303030;\r\n --paginationv2-selecttrigger-border-color: #d9d9d9fc;\r\n --paginationv2-optionslist-bg-color: #4b4b4c;\r\n --paginationv2-optionslist-font-color: #fff;\r\n --paginationv2-optionslist-hover-bg-color: #303030;\r\n --paginationv2-optionselect-bg-color: #2a2a2b;\r\n --paginationv2-optionselect-text-color: #fff;\r\n\r\n /* Informative box */\r\n --bg-informative-success: #303030;\r\n --bg-informative-alert: #303030;\r\n --bg-informative-warning: #303030;\r\n --bg-informative: #303030;\r\n\r\n --footer-bg-color: #000;\r\n\r\n /* Modal */\r\n --modal-header-bg-color: #4a4a4a;\r\n}\r\n\r\n::placeholder {\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n:-ms-input-placeholder {\r\n /* Para Internet Explorer 10-11 */\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n::-ms-input-placeholder {\r\n /* Para Microsoft Edge */\r\n color: var(--input-placeholder-color);\r\n}\r\n\r\n/* Sobreescrevendo propriedades do input date, da lib prime react */\r\n\r\n.p-component {\r\n border-right: none;\r\n font-family: var(--font-open-sans-serif) !important;\r\n font-weight: 700;\r\n color: var(--input-placeholder-color);\r\n font-size: var(--font-size-14, 14px);\r\n line-height: 24px;\r\n}\r\n.p-inputwrapper {\r\n width: 100% !important;\r\n}\r\n\r\n.p-button-icon-only {\r\n background-color: white !important;\r\n box-shadow: none !important;\r\n border-top: 1px solid #d1d5db;\r\n border-right: 1px solid #d1d5db;\r\n border-bottom: 1px solid #d1d5db;\r\n border-left: none;\r\n border-top-right-radius: 6px;\r\n border-bottom-right-radius: 6px;\r\n max-width: 50px;\r\n}\r\n\r\n.buttoFocus {\r\n outline: 0 none;\r\n outline-offset: 0;\r\n box-shadow: 0 0 0 0.2rem #a5f3fc !important;\r\n border-color: #06b6d4;\r\n}\r\n\r\n.buttoInvalid {\r\n border-color: red !important;\r\n}\r\n\r\n.buttonHover {\r\n border-color: #06b6d4;\r\n}\r\n";
|
|
23689
23707
|
styleInject(css_248z);
|
|
23690
23708
|
|
|
23691
23709
|
function installPrimeReactStyles() {
|