pge-front-common 14.2.5-beta.1 → 14.2.5-beta.11
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.
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioButtonProps } from "./radioButton.types";
|
|
3
|
-
declare const RadioButton: ({ name, label, value, checked, message, textError, hasError, required, disabled, onChange, customClass, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: RadioButtonProps) => React.JSX.Element;
|
|
4
|
-
export default RadioButton;
|
|
3
|
+
export declare const RadioButton: ({ name, label, value, checked, message, textError, hasError, required, disabled, onChange, customClass, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: RadioButtonProps) => React.JSX.Element;
|
package/lib/index.esm.js
CHANGED
|
@@ -833,7 +833,7 @@ var TextareaBase = function (_a) {
|
|
|
833
833
|
showCounter && (React__default.createElement("div", { className: "".concat(styles$y.counter, " ").concat(textError && hasError ? styles$y.messageError : "") }, characterCount))))));
|
|
834
834
|
};
|
|
835
835
|
|
|
836
|
-
var css_248z$B = ".radioGroup-module__inputContainer___0cHBx {\r\n width: 306px;\r\n color: var(--color-label);\r\n}\r\n\r\n.radioGroup-module__label___Ziyuh {\r\n color: var(--color-label);\r\n width: 100%;\r\n font-family: var(--font-open-sans-serif);\r\n font-size: 16px;\r\n font-weight: var(--input-font-weight);\r\n line-height: var(--input-line-height);\r\n text-align: left;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__labelRequired___q7SOr::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__labelError___Ulm2e {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__inputWrapper___wbpEu {\r\n background-color: #fff;\r\n cursor: pointer;\r\n width: 100%;\r\n font-family: \"Open Sans\", 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.radioGroup-module__inputContent___g2v-v {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.radioGroup-module__message___FoIYt {\r\n color: var(--color-label);\r\n margin-left: 10px;\r\n margin-top: 0;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n line-height: 14px;\r\n text-align: left;\r\n}\r\n\r\n.radioGroup-module__messageError___5BsQY {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0.4rem 0rem;\r\n font-size: 14px;\r\n font-family: var(--font-open-sans-regular);\r\n outline: none;\r\n line-height: 24px;\r\n font-weight: 400;\r\n transition: border-color 0.3s;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__horizontal___J4nzL {\r\n flex-direction: row;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__vertical___t-DLk {\r\n flex-direction: column;\r\n}\r\n\r\n.radioGroup-module__radioLabel___wJDuM {\r\n margin-right: 10px;\r\n display: flex;\r\n align-items: center;\r\n font-size: 14px;\r\n font-weight: 400;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputContainer___0cHBx input[type=\"radio\"i] {\r\n background-color: initial;\r\n cursor: pointer;\r\n appearance: auto;\r\n box-sizing: border-box;\r\n margin: 1px 5px 0px 5px;\r\n padding: initial;\r\n border: initial;\r\n transform: scale(1.25); /* tamanho do radio */\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"] {\r\n border: 1px solid var(--color-danger);\r\n appearance: none;\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background-color: transparent;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:checked {\r\n accent-color: var(--color-danger);\r\n appearance: auto;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:disabled {\r\n accent-color: var(--color-border);\r\n appearance: auto;\r\n}\r\n";
|
|
836
|
+
var css_248z$B = ".radioGroup-module__inputContainer___0cHBx {\r\n width: 306px;\r\n color: var(--color-label);\r\n}\r\n\r\n.radioGroup-module__label___Ziyuh {\r\n color: var(--color-label);\r\n width: 100%;\r\n font-family: var(--font-open-sans-serif);\r\n font-size: 16px;\r\n font-weight: var(--input-font-weight);\r\n line-height: var(--input-line-height);\r\n text-align: left;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__labelRequired___q7SOr::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__labelError___Ulm2e {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__inputWrapper___wbpEu {\r\n background-color: #fff;\r\n cursor: pointer;\r\n width: 100%;\r\n font-family: \"Open Sans\", 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.radioGroup-module__inputContent___g2v-v {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.radioGroup-module__message___FoIYt {\r\n color: var(--color-label);\r\n margin-left: 10px;\r\n margin-top: 0;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n line-height: 14px;\r\n text-align: left;\r\n}\r\n\r\n.radioGroup-module__messageError___5BsQY {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0.4rem 0rem;\r\n font-size: 14px;\r\n font-family: var(--font-open-sans-regular);\r\n outline: none;\r\n line-height: 24px;\r\n font-weight: 400;\r\n transition: border-color 0.3s;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__horizontal___J4nzL {\r\n flex-direction: row;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__vertical___t-DLk {\r\n flex-direction: column;\r\n}\r\n\r\n.radioGroup-module__radioLabel___wJDuM {\r\n margin-right: 10px;\r\n display: flex;\r\n align-items: center;\r\n font-size: 14px;\r\n font-weight: 400;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputContainer___0cHBx input[type=\"radio\" i] {\r\n background-color: initial;\r\n cursor: pointer;\r\n appearance: auto;\r\n box-sizing: border-box;\r\n margin: 1px 5px 0px 5px;\r\n padding: initial;\r\n border: initial;\r\n transform: scale(1.25); /* tamanho do radio */\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"] {\r\n border: 1px solid var(--color-danger);\r\n appearance: none;\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background-color: transparent;\r\n cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:checked {\r\n accent-color: var(--color-danger);\r\n appearance: auto;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:disabled {\r\n accent-color: var(--color-border);\r\n appearance: auto;\r\n}\r\n";
|
|
837
837
|
var styles$x = {"inputContainer":"radioGroup-module__inputContainer___0cHBx","label":"radioGroup-module__label___Ziyuh","labelRequired":"radioGroup-module__labelRequired___q7SOr","labelError":"radioGroup-module__labelError___Ulm2e","inputWrapper":"radioGroup-module__inputWrapper___wbpEu","inputContent":"radioGroup-module__inputContent___g2v-v","message":"radioGroup-module__message___FoIYt","messageError":"radioGroup-module__messageError___5BsQY","radioGroup":"radioGroup-module__radioGroup___YpgFb","horizontal":"radioGroup-module__horizontal___J4nzL","vertical":"radioGroup-module__vertical___t-DLk","radioLabel":"radioGroup-module__radioLabel___wJDuM","inputWrapperError":"radioGroup-module__inputWrapperError___91QS1"};
|
|
838
838
|
styleInject(css_248z$B);
|
|
839
839
|
|
|
@@ -857,19 +857,18 @@ var RadioGroupBase = function (_a) {
|
|
|
857
857
|
!hasError && message && React__default.createElement("p", { className: styles$x.message }, message)));
|
|
858
858
|
};
|
|
859
859
|
|
|
860
|
-
var css_248z$A = ".radioButton-
|
|
861
|
-
var styles$w = {"
|
|
860
|
+
var css_248z$A = ".radioButton-module__inputContainerItem___5DkxX {\r\n width: fit-content;\r\n color: var(--color-label);\r\n}\r\n\r\n.radioButton-module__label___wVR78 {\r\n color: var(--color-label);\r\n width: 100%;\r\n font-family: var(--font-open-sans-serif);\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 text-align: left;\r\n cursor: pointer;\r\n}\r\n\r\n.radioButton-module__labelRequired___nXMVZ::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioButton-module__labelError___-3YGd {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioButton-module__inputWrapper___0J8bD {\r\n cursor: pointer;\r\n width: 100%;\r\n font-family: \"Open Sans\", 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.radioButton-module__inputWrapperErrorItem___thRCT {\r\n border-color: var(--color-danger);\r\n}\r\n\r\n.radioButton-module__inputContent___gOApv {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.radioButton-module__message___lFQac {\r\n color: var(--color-label);\r\n margin-left: 10px;\r\n margin-top: 0;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n line-height: 14px;\r\n text-align: left;\r\n}\r\n\r\n.radioButton-module__messageError___0mNqy {\r\n color: var(--color-danger);\r\n}\r\n\r\n.radioButton-module__radioLabelItem___XIwXd {\r\n display: flex;\r\n align-items: center;\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n cursor: pointer;\r\n width: fit-content;\r\n padding: 0.4rem 0rem;\r\n font-family: var(--font-open-sans-regular);\r\n outline: none;\r\n line-height: 24px;\r\n transition: border-color 0.3s;\r\n gap: 10px;\r\n}\r\n\r\n.radioButton-module__radioInput___G8GTH {\r\n background-color: initial;\r\n cursor: pointer;\r\n appearance: auto;\r\n box-sizing: border-box;\r\n margin: 1px 5px 0px 5px;\r\n padding: initial;\r\n border: initial;\r\n transform: scale(1.25); /* tamanho do radio */\r\n}\r\n\r\n.radioButton-module__radioInput___G8GTH:focus-visible {\r\n outline: 2px solid var(--color-primary, #0066cc);\r\n outline-offset: 2px;\r\n border-radius: 50%;\r\n}\r\n\r\n.radioButton-module__radioInputDisabled___awcjj {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n.radioButton-module__radioInputError___eTPz2 {\r\n border: 1px solid var(--color-danger);\r\n appearance: none;\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background-color: transparent;\r\n cursor: pointer;\r\n}\r\n\r\n.radioButton-module__radioInputError___eTPz2:checked {\r\n accent-color: var(--color-danger);\r\n appearance: auto;\r\n}\r\n\r\n.radioButton-module__radioInputError___eTPz2:disabled {\r\n accent-color: var(--color-border);\r\n appearance: auto;\r\n}\r\n\r\n.radioButton-module__radioLabelItemDisabled___Q-YvV {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n";
|
|
861
|
+
var styles$w = {"inputContainerItem":"radioButton-module__inputContainerItem___5DkxX","label":"radioButton-module__label___wVR78","labelRequired":"radioButton-module__labelRequired___nXMVZ","labelError":"radioButton-module__labelError___-3YGd","inputWrapper":"radioButton-module__inputWrapper___0J8bD","inputWrapperErrorItem":"radioButton-module__inputWrapperErrorItem___thRCT","inputContent":"radioButton-module__inputContent___gOApv","message":"radioButton-module__message___lFQac","messageError":"radioButton-module__messageError___0mNqy","radioLabelItem":"radioButton-module__radioLabelItem___XIwXd","radioInput":"radioButton-module__radioInput___G8GTH","radioInputDisabled":"radioButton-module__radioInputDisabled___awcjj","radioInputError":"radioButton-module__radioInputError___eTPz2","radioLabelItemDisabled":"radioButton-module__radioLabelItemDisabled___Q-YvV"};
|
|
862
862
|
styleInject(css_248z$A);
|
|
863
863
|
|
|
864
864
|
var RadioButton = function (_a) {
|
|
865
|
-
var name = _a.name, label = _a.label, value = _a.value, _b = _a.checked, checked = _b === void 0 ? false : _b, message = _a.message, textError = _a.textError, _c = _a.hasError, hasError = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onChange = _a.onChange, customClass = _a.customClass
|
|
865
|
+
var name = _a.name, label = _a.label, value = _a.value, _b = _a.checked, checked = _b === void 0 ? false : _b, message = _a.message, textError = _a.textError, _c = _a.hasError, hasError = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onChange = _a.onChange, customClass = _a.customClass; _a.id; var ariaLabel = _a["aria-label"], ariaDescribedBy = _a["aria-describedby"], props = __rest(_a, ["name", "label", "value", "checked", "message", "textError", "hasError", "required", "disabled", "onChange", "customClass", "id", "aria-label", "aria-describedby"]);
|
|
866
866
|
var generatedId = useId$1();
|
|
867
|
-
var radioId = id || "radio-".concat(generatedId);
|
|
868
867
|
var errorId = "radio-error-".concat(generatedId);
|
|
869
868
|
var messageId = "radio-message-".concat(generatedId);
|
|
870
869
|
var classes = customClass
|
|
871
|
-
? "".concat(styles$w.
|
|
872
|
-
: styles$w.
|
|
870
|
+
? "".concat(styles$w.inputContainerItem, " ").concat(customClass)
|
|
871
|
+
: styles$w.inputContainerItem;
|
|
873
872
|
var ariaDescribedByValue = [
|
|
874
873
|
hasError && textError ? errorId : null,
|
|
875
874
|
!hasError && message ? messageId : null,
|
|
@@ -878,12 +877,12 @@ var RadioButton = function (_a) {
|
|
|
878
877
|
.filter(Boolean)
|
|
879
878
|
.join(" ") || undefined;
|
|
880
879
|
return (React__default.createElement("div", { className: classes },
|
|
881
|
-
React__default.createElement("div", { className: "".concat(styles$w.inputWrapper, " ").concat(hasError ? styles$w.
|
|
880
|
+
React__default.createElement("div", { className: "".concat(styles$w.inputWrapper, " ").concat(hasError ? styles$w.inputWrapperErrorItem : "") },
|
|
882
881
|
React__default.createElement("div", { className: styles$w.inputContent },
|
|
883
|
-
React__default.createElement("label", { htmlFor:
|
|
884
|
-
React__default.createElement("input", __assign({ type: "radio", id:
|
|
882
|
+
React__default.createElement("label", { htmlFor: name, className: "".concat(styles$w.radioLabelItem, " ").concat(hasError ? styles$w.labelError : "", " ").concat(disabled ? styles$w.radioLabelItemDisabled : "") },
|
|
883
|
+
React__default.createElement("input", __assign({ type: "radio", id: name, name: name, value: value, checked: checked, onChange: function (event) {
|
|
885
884
|
onChange(event);
|
|
886
|
-
}, disabled: disabled, required: required, "aria-label": ariaLabel || (typeof label === "string" ? label : undefined), "aria-describedby": ariaDescribedByValue, "aria-invalid": hasError, "aria-errormessage": hasError && textError ? errorId : undefined }, props)),
|
|
885
|
+
}, disabled: disabled, required: required, className: "".concat(styles$w.radioInput, " ").concat(hasError ? styles$w.radioInputError : "", " ").concat(disabled ? styles$w.radioInputDisabled : ""), "aria-label": ariaLabel || (typeof label === "string" ? label : undefined), "aria-describedby": ariaDescribedByValue, "aria-invalid": hasError, "aria-errormessage": hasError && textError ? errorId : undefined }, props)),
|
|
887
886
|
label && (React__default.createElement("span", { className: "".concat(styles$w.label, " ").concat(required ? styles$w.labelRequired : "") }, label))))),
|
|
888
887
|
textError && hasError && (React__default.createElement("p", { id: errorId, className: "".concat(styles$w.message, " ").concat(styles$w.messageError), role: "alert", "aria-live": "polite" }, textError)),
|
|
889
888
|
!hasError && message && (React__default.createElement("p", { id: messageId, className: styles$w.message }, message))));
|