pge-front-common 7.0.4 → 8.0.0
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/Input/input.types.d.ts +1 -1
- package/lib/components/RadioGroup/RadioGroup.d.ts +4 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +7 -0
- package/lib/components/RadioGroup/radioGroup.types.d.ts +19 -0
- package/lib/components/Textarea/Textarea.d.ts +4 -0
- package/lib/components/Textarea/Textarea.stories.d.ts +8 -0
- package/lib/components/Textarea/textarea.types.d.ts +15 -0
- package/lib/index.d.ts +43 -5
- package/lib/index.esm.js +59 -19
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +60 -18
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { RadioGroupBaseProps } from "./radioGroup.types";
|
|
3
|
+
declare const RadioGroupBase: ({ name, label, value, options, message, textError, hasError, orientation, required, disabled, onInput, customClass, ...props }: RadioGroupBaseProps) => React.JSX.Element;
|
|
4
|
+
export default RadioGroupBase;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import RadioGroupBase from "./RadioGroup";
|
|
3
|
+
declare const meta: Meta<typeof RadioGroupBase>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithError: Story;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ChangeEvent } from "react";
|
|
2
|
+
export interface RadioGroupBaseProps extends Partial<HTMLInputElement> {
|
|
3
|
+
name: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
options: OptionsProps[];
|
|
6
|
+
value: string;
|
|
7
|
+
hasError?: boolean;
|
|
8
|
+
textError?: string;
|
|
9
|
+
message?: string;
|
|
10
|
+
onInput: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
11
|
+
customClass?: string;
|
|
12
|
+
orientation?: "horizontal" | "vertical";
|
|
13
|
+
required?: boolean | false;
|
|
14
|
+
disabled?: boolean | false;
|
|
15
|
+
}
|
|
16
|
+
export type OptionsProps = {
|
|
17
|
+
value: string;
|
|
18
|
+
label: string;
|
|
19
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TextareaBaseProps } from "./textarea.types";
|
|
3
|
+
declare const TextareaBase: ({ name, label, value, type, Icon, placeholder, message, textAlign, textError, hasError, rows, hasIcon, required, ...props }: TextareaBaseProps) => React.JSX.Element;
|
|
4
|
+
export default TextareaBase;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import TextareaBase from "./Textarea";
|
|
3
|
+
declare const meta: Meta<typeof TextareaBase>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithError: Story;
|
|
8
|
+
export declare const WithIcon: Story;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type TextAlignType = "start" | "end" | "center";
|
|
3
|
+
export interface TextareaBaseProps extends Partial<HTMLTextAreaElement> {
|
|
4
|
+
label?: string;
|
|
5
|
+
hasError?: boolean;
|
|
6
|
+
textError?: string;
|
|
7
|
+
message?: string;
|
|
8
|
+
hasIcon?: boolean;
|
|
9
|
+
Icon?: React.ReactNode;
|
|
10
|
+
textAlign: TextAlignType;
|
|
11
|
+
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
12
|
+
onClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
|
|
13
|
+
rows?: number;
|
|
14
|
+
required?: boolean | false;
|
|
15
|
+
}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { SVGProps } from 'react';
|
|
1
|
+
import React, { ChangeEvent, SVGProps } from 'react';
|
|
2
2
|
|
|
3
3
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
4
|
variant: "primary" | "secondary";
|
|
@@ -7,21 +7,59 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
7
7
|
}
|
|
8
8
|
declare function Button({ variant, text, leftIcon, ...props }: ButtonProps): React.JSX.Element;
|
|
9
9
|
|
|
10
|
-
type TextAlignType = "start" | "end" | "center";
|
|
10
|
+
type TextAlignType$1 = "start" | "end" | "center";
|
|
11
11
|
interface InputBaseProps extends Partial<HTMLInputElement> {
|
|
12
|
-
label
|
|
12
|
+
label?: string;
|
|
13
13
|
hasError?: boolean;
|
|
14
14
|
hasIcon?: boolean;
|
|
15
15
|
textError?: string;
|
|
16
16
|
message?: string;
|
|
17
17
|
Icon?: React.ReactNode;
|
|
18
|
-
textAlign: TextAlignType;
|
|
18
|
+
textAlign: TextAlignType$1;
|
|
19
19
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
20
20
|
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
declare const InputBase: React.FC<InputBaseProps>;
|
|
24
24
|
|
|
25
|
+
type TextAlignType = "start" | "end" | "center";
|
|
26
|
+
interface TextareaBaseProps extends Partial<HTMLTextAreaElement> {
|
|
27
|
+
label?: string;
|
|
28
|
+
hasError?: boolean;
|
|
29
|
+
textError?: string;
|
|
30
|
+
message?: string;
|
|
31
|
+
hasIcon?: boolean;
|
|
32
|
+
Icon?: React.ReactNode;
|
|
33
|
+
textAlign: TextAlignType;
|
|
34
|
+
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
35
|
+
onClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
|
|
36
|
+
rows?: number;
|
|
37
|
+
required?: boolean | false;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
declare const TextareaBase: ({ name, label, value, type, Icon, placeholder, message, textAlign, textError, hasError, rows, hasIcon, required, ...props }: TextareaBaseProps) => React.JSX.Element;
|
|
41
|
+
|
|
42
|
+
interface RadioGroupBaseProps extends Partial<HTMLInputElement> {
|
|
43
|
+
name: string;
|
|
44
|
+
label?: string;
|
|
45
|
+
options: OptionsProps$1[];
|
|
46
|
+
value: string;
|
|
47
|
+
hasError?: boolean;
|
|
48
|
+
textError?: string;
|
|
49
|
+
message?: string;
|
|
50
|
+
onInput: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
51
|
+
customClass?: string;
|
|
52
|
+
orientation?: "horizontal" | "vertical";
|
|
53
|
+
required?: boolean | false;
|
|
54
|
+
disabled?: boolean | false;
|
|
55
|
+
}
|
|
56
|
+
type OptionsProps$1 = {
|
|
57
|
+
value: string;
|
|
58
|
+
label: string;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
declare const RadioGroupBase: ({ name, label, value, options, message, textError, hasError, orientation, required, disabled, onInput, customClass, ...props }: RadioGroupBaseProps) => React.JSX.Element;
|
|
62
|
+
|
|
25
63
|
interface ModalProps {
|
|
26
64
|
isModalOpen: boolean;
|
|
27
65
|
onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -145,4 +183,4 @@ declare const IconSwap: (props?: SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
|
145
183
|
|
|
146
184
|
declare const IconAddCell: (props?: SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
147
185
|
|
|
148
|
-
export { Button, type ButtonProps, type DropdownProps, FooterComponent as Footer, Header, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconLogout, IconNewTab, IconProfile, IconRemove, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpload, IconVisibillity, IconWarning, InputBase, type InputBaseProps, Modal, ModalConfirm, type ModalConfirmProps, type ModalProps, type OptionsProps, Select };
|
|
186
|
+
export { Button, type ButtonProps, type DropdownProps, FooterComponent as Footer, Header, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconLogout, IconNewTab, IconProfile, IconRemove, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpload, IconVisibillity, IconWarning, InputBase, type InputBaseProps, Modal, ModalConfirm, type ModalConfirmProps, type ModalProps, type OptionsProps, RadioGroupBase, type RadioGroupBaseProps, Select, TextareaBase, type TextareaBaseProps };
|
package/lib/index.esm.js
CHANGED
|
@@ -86,33 +86,73 @@ function styleInject(css, ref) {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
var css_248z$
|
|
90
|
-
var styles$
|
|
91
|
-
styleInject(css_248z$
|
|
89
|
+
var css_248z$a = ".button-module__button___JyfZW {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n cursor: pointer;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n min-width: 70px;\r\n height: 38px;\r\n width: 100%;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO {\r\n border: 1px solid #005a92;\r\n background: #005a92;\r\n color: #ffffff;\r\n font-weight: 700;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO:hover {\r\n opacity: 1;\r\n background-color: rgb(0 67 109);\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__secondary___Q4I1z {\r\n border: 1px solid #005a92;\r\n background: transparent;\r\n color: #005a92;\r\n font-weight: 700;\r\n}\r\n\r\n.button-module__button___JyfZW:disabled {\r\n cursor: not-allowed;\r\n}\r\n";
|
|
90
|
+
var styles$a = {"button":"button-module__button___JyfZW","primary":"button-module__primary___ggjlO","secondary":"button-module__secondary___Q4I1z"};
|
|
91
|
+
styleInject(css_248z$a);
|
|
92
92
|
|
|
93
93
|
function Button(_a) {
|
|
94
94
|
var variant = _a.variant, _b = _a.text, text = _b === void 0 ? "" : _b, leftIcon = _a.leftIcon, props = __rest(_a, ["variant", "text", "leftIcon"]);
|
|
95
|
-
return (React__default.createElement("button", __assign({ className: "".concat(styles$
|
|
95
|
+
return (React__default.createElement("button", __assign({ className: "".concat(styles$a.button, " ").concat(styles$a[variant]) }, props),
|
|
96
96
|
leftIcon,
|
|
97
97
|
text));
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
var css_248z$
|
|
101
|
-
var styles$
|
|
102
|
-
styleInject(css_248z$
|
|
100
|
+
var css_248z$9 = ".input-module__inputContainer___ulqhQ {\r\n width: 306px;\r\n height: 100px;\r\n color: #30303090;\r\n position: relative;\r\n}\r\n\r\n.input-module__inputContainer___ulqhQ[data-width] {\r\n width: attr(data-width) px;\r\n}\r\n\r\n.input-module__label___GxBaS {\r\n color: var(--color-label);\r\n width: 100%;\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 cursor: pointer;\r\n}\r\n\r\n.input-module__labelRequired___DzjW5::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.input-module__labelError___yLW-M {\r\n color: var(--color-danger);\r\n}\r\n\r\n.input-module__inputWrapper___kvf4R {\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: \"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.input-module__inputWrapperError___ktfVO {\r\n border: var(--input-border-danger) !important;\r\n outline: var(--input-outline-danger) !important;\r\n}\r\n\r\n.input-module__inputWrapper___kvf4R:focus,\r\n.input-module__inputWrapper___kvf4R:focus-visible,\r\n.input-module__inputWrapper___kvf4R:focus-within {\r\n border: var(--input-border-focus);\r\n outline: var(--input-outline-focus);\r\n}\r\n\r\n.input-module__inputContent___vvNDY {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n height: 46px;\r\n}\r\n\r\n.input-module__styledInput___mgfp0 {\r\n color: var(--color-input);\r\n cursor: pointer;\r\n width: 90%;\r\n border: none;\r\n}\r\n\r\n.input-module__styledInput___mgfp0::placeholder {\r\n color: var(--color-placeholder);\r\n line-height: 20px;\r\n}\r\n\r\n.input-module__styledInput___mgfp0:focus,\r\n.input-module__styledInput___mgfp0:focus-visible,\r\n.input-module__styledInput___mgfp0:focus-within {\r\n outline: none;\r\n}\r\n\r\n.input-module__message___xBlHe {\r\n color: var(--color-label);\r\n margin-left: 10px;\r\n margin-top: 4px;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n line-height: 15px;\r\n text-align: left;\r\n}\r\n\r\n.input-module__messageError___-h6Yp {\r\n color: var(--color-danger);\r\n}\r\n\r\n.input-module__inputContent___vvNDY svg {\r\n margin-left: 8px;\r\n}\r\n";
|
|
101
|
+
var styles$9 = {"inputContainer":"input-module__inputContainer___ulqhQ","label":"input-module__label___GxBaS","labelRequired":"input-module__labelRequired___DzjW5","labelError":"input-module__labelError___yLW-M","inputWrapper":"input-module__inputWrapper___kvf4R","inputWrapperError":"input-module__inputWrapperError___ktfVO","inputContent":"input-module__inputContent___vvNDY","styledInput":"input-module__styledInput___mgfp0","message":"input-module__message___xBlHe","messageError":"input-module__messageError___-h6Yp"};
|
|
102
|
+
styleInject(css_248z$9);
|
|
103
103
|
|
|
104
104
|
var InputBase = function (_a) {
|
|
105
|
-
var name = _a.name, label = _a.label, value = _a.value, type = _a.type, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAlign = _a.textAlign, textError = _a.textError, hasError = _a.hasError, width = _a.width, hasIcon = _a.hasIcon, props = __rest(_a, ["name", "label", "value", "type", "Icon", "placeholder", "message", "textAlign", "textError", "hasError", "width", "hasIcon"]);
|
|
106
|
-
return (React__default.createElement("div", { className: styles$
|
|
107
|
-
React__default.createElement("label", { htmlFor: name, className: styles$
|
|
108
|
-
React__default.createElement("div", { className: "".concat(styles$
|
|
109
|
-
React__default.createElement("div", { className: styles$
|
|
105
|
+
var name = _a.name, label = _a.label, value = _a.value, type = _a.type, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAlign = _a.textAlign, textError = _a.textError, hasError = _a.hasError, width = _a.width, hasIcon = _a.hasIcon, required = _a.required, props = __rest(_a, ["name", "label", "value", "type", "Icon", "placeholder", "message", "textAlign", "textError", "hasError", "width", "hasIcon", "required"]);
|
|
106
|
+
return (React__default.createElement("div", { className: styles$9.inputContainer, style: { width: width ? "".concat(width, "px") : "306px" }, "data-width": width },
|
|
107
|
+
label && (React__default.createElement("label", { htmlFor: name, className: "".concat(styles$9.label, " ").concat(required ? styles$9.labelRequired : "", " ").concat(hasError ? styles$9.labelError : "") }, label)),
|
|
108
|
+
React__default.createElement("div", { className: "".concat(styles$9.inputWrapper, " ").concat(hasError ? styles$9.inputWrapperError : "") },
|
|
109
|
+
React__default.createElement("div", { className: styles$9.inputContent },
|
|
110
110
|
Icon && Icon,
|
|
111
|
-
React__default.createElement("input", __assign({}, props, { id: name, type: type, placeholder: placeholder, value: value, className: styles$
|
|
111
|
+
React__default.createElement("input", __assign({}, props, { id: name, type: type, placeholder: placeholder, value: value, className: styles$9.styledInput, style: {
|
|
112
112
|
textAlign: textAlign,
|
|
113
|
-
marginLeft: hasIcon ? (textAlign ===
|
|
113
|
+
marginLeft: hasIcon ? (textAlign === "start" ? "8px" : "0") : "8px",
|
|
114
114
|
} })))),
|
|
115
|
-
textError && hasError &&
|
|
115
|
+
textError && hasError && React__default.createElement("p", { className: "".concat(styles$9.message, " ").concat(styles$9.messageError) }, textError),
|
|
116
|
+
!hasError && message && React__default.createElement("p", { className: styles$9.message }, message)));
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
var css_248z$8 = ".textarea-module__inputContainer___lpM5d {\r\n width: 306px;\r\n color: var(--color-input);\r\n}\r\n\r\n.textarea-module__label___qDTpX {\r\n color: var(--color-label);\r\n width: 100%;\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 cursor: pointer;\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: \"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.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}\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__styledInput___fPp-f {\r\n color: var(--color-input);\r\n cursor: pointer;\r\n width: 96%;\r\n border: none;\r\n}\r\n\r\n.textarea-module__styledInput___fPp-f::placeholder {\r\n color: var(--color-placeholder);\r\n line-height: 20px;\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: 10px;\r\n margin-top: 4px;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-size: 10px;\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 margin-left: 8px;\r\n}\r\n";
|
|
120
|
+
var styles$8 = {"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"};
|
|
121
|
+
styleInject(css_248z$8);
|
|
122
|
+
|
|
123
|
+
var TextareaBase = function (_a) {
|
|
124
|
+
var name = _a.name, label = _a.label, value = _a.value; _a.type; var Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAlign = _a.textAlign, textError = _a.textError, hasError = _a.hasError, rows = _a.rows, hasIcon = _a.hasIcon, required = _a.required, props = __rest(_a, ["name", "label", "value", "type", "Icon", "placeholder", "message", "textAlign", "textError", "hasError", "rows", "hasIcon", "required"]);
|
|
125
|
+
return (React__default.createElement("div", { className: styles$8.inputContainer },
|
|
126
|
+
label && (React__default.createElement("label", { htmlFor: name, className: "".concat(styles$8.label, " ").concat(required ? styles$8.labelRequired : "", " ").concat(hasError ? styles$8.labelError : "") }, label)),
|
|
127
|
+
React__default.createElement("div", { className: "".concat(styles$8.inputWrapper, " ").concat(hasError ? styles$8.inputWrapperError : "") },
|
|
128
|
+
React__default.createElement("div", { className: styles$8.inputContent },
|
|
129
|
+
Icon && Icon,
|
|
130
|
+
React__default.createElement("textarea", __assign({}, props, { id: name, placeholder: placeholder, value: value, className: styles$8.styledInput, style: {
|
|
131
|
+
textAlign: textAlign,
|
|
132
|
+
marginLeft: hasIcon ? (textAlign === "start" ? "8px" : "0") : "8px",
|
|
133
|
+
}, rows: rows, required: required })))),
|
|
134
|
+
textError && hasError && React__default.createElement("p", { className: "".concat(styles$8.message, " ").concat(styles$8.messageError) }, textError),
|
|
135
|
+
!hasError && message && React__default.createElement("p", { className: styles$8.message }, message)));
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
var css_248z$7 = ".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: 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 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";
|
|
139
|
+
var styles$7 = {"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"};
|
|
140
|
+
styleInject(css_248z$7);
|
|
141
|
+
|
|
142
|
+
var RadioGroupBase = function (_a) {
|
|
143
|
+
var name = _a.name, label = _a.label, value = _a.value, options = _a.options, message = _a.message, textError = _a.textError, hasError = _a.hasError, orientation = _a.orientation, required = _a.required, disabled = _a.disabled, onInput = _a.onInput, customClass = _a.customClass, props = __rest(_a, ["name", "label", "value", "options", "message", "textError", "hasError", "orientation", "required", "disabled", "onInput", "customClass"]);
|
|
144
|
+
var classes = customClass ? "".concat(styles$7.inputContainer, " ").concat(customClass) : styles$7.inputContainer;
|
|
145
|
+
console.log(props);
|
|
146
|
+
return (React__default.createElement("div", { className: classes },
|
|
147
|
+
label && (React__default.createElement("label", { htmlFor: name, className: "".concat(styles$7.label, " ").concat(required ? styles$7.labelRequired : "", " ").concat(hasError ? styles$7.labelError : "") }, label)),
|
|
148
|
+
React__default.createElement("div", { className: "".concat(styles$7.inputWrapper, " ").concat(hasError ? styles$7.inputWrapperError : "") },
|
|
149
|
+
React__default.createElement("div", { className: styles$7.inputContent },
|
|
150
|
+
React__default.createElement("div", { className: "".concat(orientation === "vertical" ? styles$7[orientation] : styles$7.radioGroup) }, options.map(function (option) { return (React__default.createElement("label", { key: option.value, className: "".concat(styles$7.radioLabel, " ").concat(hasError ? styles$7.labelError : "") },
|
|
151
|
+
React__default.createElement("input", { type: "radio", name: name, value: option.value, checked: value === option.value, onChange: function (event) {
|
|
152
|
+
onInput(event);
|
|
153
|
+
}, disabled: disabled }),
|
|
154
|
+
option.label)); })))),
|
|
155
|
+
textError && hasError && React__default.createElement("p", { className: "".concat(styles$7.message, " ").concat(styles$7.messageError) }, textError),
|
|
116
156
|
!hasError && message && React__default.createElement("p", { className: styles$7.message }, message)));
|
|
117
157
|
};
|
|
118
158
|
|
|
@@ -2226,15 +2266,15 @@ var IconCLose = function (props) {
|
|
|
2226
2266
|
var theme = {
|
|
2227
2267
|
colors: {
|
|
2228
2268
|
primary: "#005a92",
|
|
2229
|
-
secondary: "",
|
|
2269
|
+
secondary: "#303030",
|
|
2230
2270
|
hover: "#005A92",
|
|
2231
|
-
textSecondary: "",
|
|
2271
|
+
textSecondary: "#4A4A4B",
|
|
2232
2272
|
iconColor: "#4A4A4B",
|
|
2233
2273
|
success: "#198754",
|
|
2234
2274
|
warning: "#CB8700",
|
|
2235
2275
|
alert: "#CB0A0A",
|
|
2236
2276
|
information: "#1A95B0",
|
|
2237
|
-
border: "#
|
|
2277
|
+
border: "#cfcfcffc",
|
|
2238
2278
|
lightGrey: "#C3C3C3",
|
|
2239
2279
|
grey: "#A0A0A0",
|
|
2240
2280
|
base: {
|
|
@@ -2693,5 +2733,5 @@ function FooterComponent() {
|
|
|
2693
2733
|
React__default.createElement("div", { className: styles.footerCopyright }, "2024\u00A9 Copyright - Todos os direitos reservados."))));
|
|
2694
2734
|
}
|
|
2695
2735
|
|
|
2696
|
-
export { Button, FooterComponent as Footer, Header, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconLogout, IconNewTab, IconProfile, IconRemove, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpload, IconVisibillity, IconWarning, InputBase, Modal, ModalConfirm, Select };
|
|
2736
|
+
export { Button, FooterComponent as Footer, Header, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconLogout, IconNewTab, IconProfile, IconRemove, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpload, IconVisibillity, IconWarning, InputBase, Modal, ModalConfirm, RadioGroupBase, Select, TextareaBase };
|
|
2697
2737
|
//# sourceMappingURL=index.esm.js.map
|