pge-front-common 7.0.3 → 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 +68 -25
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +69 -24
- 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: {
|
|
@@ -2529,8 +2569,8 @@ var css_248z$3 = ".header-module__separator_background___lYfCd {\r\n background
|
|
|
2529
2569
|
var styles$3 = {"separator_background":"header-module__separator_background___lYfCd","container":"header-module__container___eaqPg","wrapperMenu":"header-module__wrapperMenu___m5rLa","IconMenu":"header-module__IconMenu___7JWj-","verticalDivider":"header-module__verticalDivider___4JMWc","containerHeaderIndex":"header-module__containerHeaderIndex___ueqa-","set_shadow":"header-module__set_shadow___UUN7Y"};
|
|
2530
2570
|
styleInject(css_248z$3);
|
|
2531
2571
|
|
|
2532
|
-
var css_248z$2 = ".dropdown-module__dropdown___EIaq- {\r\n position: absolute;\r\n border: 1px solid
|
|
2533
|
-
var styles$2 = {"dropdown":"dropdown-module__dropdown___EIaq-","primaryDropdown":"dropdown-module__primaryDropdown___I7kas","
|
|
2572
|
+
var css_248z$2 = ".dropdown-module__dropdown___EIaq- {\r\n position: absolute;\r\n border: 1px solid rgb(197, 197, 197);\r\n background: #fff;\r\n padding: 8px 0;\r\n color: #0062cc;\r\n border-radius: 4px;\r\n z-index: 400;\r\n min-width: 280px;\r\n box-shadow: rgba(197, 164, 164, 0.35) 0px 5px 15px;\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas {\r\n margin: 0;\r\n padding: 0.375rem 0.88rem 0.88rem 0.88rem;\r\n min-width: 280px;\r\n color: #303030;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-align: left;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n cursor: pointer;\r\n min-height: 50px;\r\n border: none;\r\n\r\n -webkit-appearance: button;\r\n background-color: transparent;\r\n background-image: none;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas:hover {\r\n background-color: #005a921a;\r\n width: 100%;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__disabled___McFgs {\r\n color: #c3c3c3;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__home___4Odwr {\r\n font-weight: 700;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__submenu___eXCiN {\r\n font-size: 16px;\r\n line-height: 24px;\r\n text-align: left;\r\n padding-left: 30px;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89 {\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__active___RRrmk {\r\n transform: rotate(0deg);\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__inactive___AQdLm {\r\n transform: rotate(180deg);\r\n}\r\n";
|
|
2573
|
+
var styles$2 = {"dropdown":"dropdown-module__dropdown___EIaq-","primaryDropdown":"dropdown-module__primaryDropdown___I7kas","primaryDropdown__disabled":"dropdown-module__primaryDropdown__disabled___McFgs","primaryDropdown__home":"dropdown-module__primaryDropdown__home___4Odwr","primaryDropdown__submenu":"dropdown-module__primaryDropdown__submenu___eXCiN","contentIcon":"dropdown-module__contentIcon___aqI89","active":"dropdown-module__active___RRrmk","inactive":"dropdown-module__inactive___AQdLm"};
|
|
2534
2574
|
styleInject(css_248z$2);
|
|
2535
2575
|
|
|
2536
2576
|
var DropDown = function (_a) {
|
|
@@ -2544,8 +2584,8 @@ var DropDown = function (_a) {
|
|
|
2544
2584
|
var nome = _a.nome, id = _a.id, submenu = _a.submenu, checked = _a.checked, chave = _a.chave;
|
|
2545
2585
|
return (React__default.createElement("div", { key: id },
|
|
2546
2586
|
React__default.createElement("button", { className: "".concat(styles$2.primaryDropdown, " ").concat(checked
|
|
2547
|
-
? styles$2.
|
|
2548
|
-
: styles$2.
|
|
2587
|
+
? styles$2.primaryDropdown__menu
|
|
2588
|
+
: styles$2.primaryDropdown__disabled), key: id, onClick: function (ev) {
|
|
2549
2589
|
if (checked) {
|
|
2550
2590
|
setShowSubMenu(true);
|
|
2551
2591
|
setKeyMenu(keyMenu === id ? 0 : id);
|
|
@@ -2554,12 +2594,15 @@ var DropDown = function (_a) {
|
|
|
2554
2594
|
}
|
|
2555
2595
|
ev.stopPropagation();
|
|
2556
2596
|
}
|
|
2557
|
-
}, disabled: !checked },
|
|
2597
|
+
}, disabled: !checked },
|
|
2598
|
+
nome,
|
|
2599
|
+
checked && submenu.length > 0 && (React__default.createElement("div", { className: "".concat(styles$2.contentIcon, " ").concat(showSubMenu && keyMenu === id ? styles$2.active : styles$2.inactive) },
|
|
2600
|
+
React__default.createElement(IconTriangleExpand, null)))),
|
|
2558
2601
|
showSubMenu &&
|
|
2559
2602
|
keyMenu === id &&
|
|
2560
2603
|
submenu.map(function (_a) {
|
|
2561
2604
|
var id = _a.id, nome = _a.nome, checked = _a.checked;
|
|
2562
|
-
return (React__default.createElement("button", { key: id, className: "".concat(styles$2.primaryDropdown, " ").concat(styles$2.
|
|
2605
|
+
return (React__default.createElement("button", { key: id, className: "".concat(styles$2.primaryDropdown, " ").concat(styles$2.primaryDropdown__submenu, " ").concat(checked ? "" : styles$2.primaryDropdown__disabled), onClick: function (ev) {
|
|
2563
2606
|
if (checked) {
|
|
2564
2607
|
onClickHandler(chave, id);
|
|
2565
2608
|
ev.stopPropagation();
|
|
@@ -2690,5 +2733,5 @@ function FooterComponent() {
|
|
|
2690
2733
|
React__default.createElement("div", { className: styles.footerCopyright }, "2024\u00A9 Copyright - Todos os direitos reservados."))));
|
|
2691
2734
|
}
|
|
2692
2735
|
|
|
2693
|
-
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 };
|
|
2694
2737
|
//# sourceMappingURL=index.esm.js.map
|