sccoreui 6.3.40 → 6.3.42
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/dist/App.js +1 -0
- package/dist/App.scss +64 -18
- package/dist/components/form/form-fields/FieldLabel.js +1 -2
- package/dist/components/form/form-fields/form-fields.js +15 -16
- package/dist/components/list-box-dropdown/list-box-dropdown.js +18 -15
- package/dist/types/components/form/form-fields/FieldLabel.d.ts +0 -1
- package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts +1 -1
- package/dist/types/components/types/type.d.ts +0 -5
- package/package.json +1 -1
package/dist/App.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
require("./App.scss");
|
|
5
|
+
// import Home from "./pages/home";
|
|
5
6
|
// import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
|
|
6
7
|
// import Home from "./pages/home";
|
|
7
8
|
const App = () => {
|
package/dist/App.scss
CHANGED
|
@@ -1120,6 +1120,68 @@ button[aria-expanded="true"] {
|
|
|
1120
1120
|
}
|
|
1121
1121
|
}
|
|
1122
1122
|
|
|
1123
|
+
.p-button.list_box_button {
|
|
1124
|
+
height: auto;
|
|
1125
|
+
padding: 4px 8px;
|
|
1126
|
+
border-radius: var(--border-radius);
|
|
1127
|
+
color: var(--primary-400);
|
|
1128
|
+
svg {
|
|
1129
|
+
path {
|
|
1130
|
+
stroke: var(--primary-400);
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
&:enabled {
|
|
1134
|
+
&:hover {
|
|
1135
|
+
background-color: var(--primary-25);
|
|
1136
|
+
border-radius: var(--border-radius);
|
|
1137
|
+
color: var(--primary-400);
|
|
1138
|
+
svg {
|
|
1139
|
+
path {
|
|
1140
|
+
stroke: var(--primary-400);
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.list_box_chips {
|
|
1150
|
+
display: flex;
|
|
1151
|
+
flex-wrap: wrap;
|
|
1152
|
+
align-items: center;
|
|
1153
|
+
list-style: none;
|
|
1154
|
+
margin: 0;
|
|
1155
|
+
padding: 0;
|
|
1156
|
+
gap: 8px;
|
|
1157
|
+
|
|
1158
|
+
.list_box_chip {
|
|
1159
|
+
padding:4px 8px;
|
|
1160
|
+
border: 1px solid var(--gray-200);
|
|
1161
|
+
border-radius: var(--border-radius);
|
|
1162
|
+
color: var(--gray-700);
|
|
1163
|
+
display: flex;
|
|
1164
|
+
align-items: center;
|
|
1165
|
+
font-size: 14px;
|
|
1166
|
+
svg {
|
|
1167
|
+
path {
|
|
1168
|
+
stroke: var(--gray-400);
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
&:hover {
|
|
1172
|
+
border: 1px solid var(--gray-300);
|
|
1173
|
+
background-color: var(--primary-25);
|
|
1174
|
+
svg {
|
|
1175
|
+
transform: scale(1.1);
|
|
1176
|
+
cursor: pointer;
|
|
1177
|
+
path {
|
|
1178
|
+
stroke: var(--red-500);
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1123
1185
|
.list_box_dropdown {
|
|
1124
1186
|
.p-listbox-header {
|
|
1125
1187
|
padding: 12px !important;
|
|
@@ -1166,16 +1228,7 @@ button[aria-expanded="true"] {
|
|
|
1166
1228
|
}
|
|
1167
1229
|
}
|
|
1168
1230
|
|
|
1169
|
-
.list_box_chips {
|
|
1170
|
-
display: inline-block;
|
|
1171
|
-
align-items: center;
|
|
1172
|
-
list-style: none;
|
|
1173
1231
|
|
|
1174
|
-
li {
|
|
1175
|
-
float: left;
|
|
1176
|
-
height: 24px;
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
1232
|
|
|
1180
1233
|
/////// Custom list_box_dropdown ///////////
|
|
1181
1234
|
|
|
@@ -2169,16 +2222,7 @@ button[aria-expanded="true"] {
|
|
|
2169
2222
|
}
|
|
2170
2223
|
}
|
|
2171
2224
|
|
|
2172
|
-
.list_box_chips {
|
|
2173
|
-
display: inline-block;
|
|
2174
|
-
align-items: center;
|
|
2175
|
-
list-style: none;
|
|
2176
2225
|
|
|
2177
|
-
li {
|
|
2178
|
-
float: left;
|
|
2179
|
-
height: 24px;
|
|
2180
|
-
}
|
|
2181
|
-
}
|
|
2182
2226
|
|
|
2183
2227
|
/////// Custom list_box_dropdown ///////////
|
|
2184
2228
|
|
|
@@ -2889,3 +2933,5 @@ button[aria-expanded="true"] {
|
|
|
2889
2933
|
}
|
|
2890
2934
|
}
|
|
2891
2935
|
}
|
|
2936
|
+
|
|
2937
|
+
// listbox styles
|
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const svg_1 = require("../../../assets/svg/svg");
|
|
5
5
|
const FieldLabel = (props) => {
|
|
6
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(props === null || props === void 0 ? void 0 : props.isRequired) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children:
|
|
7
|
-
((props === null || props === void 0 ? void 0 : props.value) && !(props === null || props === void 0 ? void 0 : props.touched)) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningGreen, {})) : (props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningRed, {})) : ((0, jsx_runtime_1.jsx)(svg_1.Lightning, {})) })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.label, className: "mb-1" }, { children: props === null || props === void 0 ? void 0 : props.label }))] })) }));
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(props === null || props === void 0 ? void 0 : props.isRequired) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !(props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningGreen, {})) : (props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningRed, {})) : ((0, jsx_runtime_1.jsx)(svg_1.Lightning, {})) })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.label, className: "mb-1" }, { children: props === null || props === void 0 ? void 0 : props.label }))] })) }));
|
|
8
7
|
};
|
|
9
8
|
exports.default = FieldLabel;
|
|
@@ -13,38 +13,38 @@ const inputnumber_1 = require("primereact/inputnumber");
|
|
|
13
13
|
const skeleton_1 = require("primereact/skeleton");
|
|
14
14
|
const FieldLabel_1 = tslib_1.__importDefault(require("./FieldLabel"));
|
|
15
15
|
const InputTextField = (props) => {
|
|
16
|
-
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading, isRequired = false,
|
|
16
|
+
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading, isRequired = false, } = props;
|
|
17
17
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
|
|
18
18
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
19
19
|
// {label}
|
|
20
20
|
// </label>
|
|
21
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
21
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })));
|
|
22
22
|
};
|
|
23
23
|
const InputNumberField = (props) => {
|
|
24
|
-
const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits, inputNumberProps = {}, isRequired = false,
|
|
24
|
+
const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits, inputNumberProps = {}, isRequired = false, } = props;
|
|
25
25
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
|
|
26
26
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
27
27
|
// {label}
|
|
28
28
|
// </label>
|
|
29
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
29
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
|
|
30
30
|
const { value, name } = field;
|
|
31
31
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ? ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }, inputNumberProps))] }))) : ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }, inputNumberProps))) }));
|
|
32
32
|
} })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
33
33
|
};
|
|
34
34
|
const InputCurrencyField = (props) => {
|
|
35
|
-
const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, useGrouping = false, min, max, maxLength, className, validate, disabled, isLoading, inputNumberProps = {}, isRequired = false,
|
|
35
|
+
const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, useGrouping = false, min, max, maxLength, className, validate, disabled, isLoading, inputNumberProps = {}, isRequired = false, } = props;
|
|
36
36
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
|
|
37
37
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
38
38
|
// {label}
|
|
39
39
|
// </label>
|
|
40
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
40
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
|
|
41
41
|
const { value, name } = field;
|
|
42
42
|
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ name: name, value: value, "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, useGrouping: useGrouping }, inputNumberProps))] })));
|
|
43
43
|
} })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
44
44
|
};
|
|
45
45
|
const InputTextAreaField = (props) => {
|
|
46
46
|
const [charCount, setCharCount] = (0, react_1.useState)(0);
|
|
47
|
-
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading, isRequired = false,
|
|
47
|
+
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading, isRequired = false, } = props;
|
|
48
48
|
(0, react_1.useEffect)(() => {
|
|
49
49
|
setCharCount(values[name].length);
|
|
50
50
|
}, [values[name]]);
|
|
@@ -53,7 +53,7 @@ const InputTextAreaField = (props) => {
|
|
|
53
53
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
54
54
|
// {label}
|
|
55
55
|
// </label>
|
|
56
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
56
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: {
|
|
57
57
|
height: "154px",
|
|
58
58
|
resize: "none",
|
|
59
59
|
overflowY: "scroll",
|
|
@@ -62,27 +62,27 @@ const InputTextAreaField = (props) => {
|
|
|
62
62
|
const DropDownField = (props) => {
|
|
63
63
|
const { errors, touched, name, length, label, onFocus,
|
|
64
64
|
// onChange,
|
|
65
|
-
placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, isRequired = false,
|
|
65
|
+
placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, isRequired = false, } = props;
|
|
66
66
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
|
|
67
67
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
68
68
|
// {label}
|
|
69
69
|
// </label>
|
|
70
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
70
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ onFocus: () => {
|
|
71
71
|
onFocus && onFocus();
|
|
72
72
|
}, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, disabled: disabled, placeholder: placeholder }, field, {
|
|
73
73
|
// onChange={(e: any) => onChange && onChange(e)}
|
|
74
74
|
options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
75
75
|
};
|
|
76
76
|
const MultiSelectField = (props) => {
|
|
77
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false,
|
|
77
|
+
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false, } = props;
|
|
78
78
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
|
|
79
79
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
80
80
|
// {label}
|
|
81
81
|
// </label>
|
|
82
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
82
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
|
|
83
83
|
};
|
|
84
84
|
const PhoneNumberField = (props) => {
|
|
85
|
-
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading, isRequired = false,
|
|
85
|
+
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading, isRequired = false, } = props;
|
|
86
86
|
const customCountry = (props) => {
|
|
87
87
|
const customCountryTemplate = (options) => {
|
|
88
88
|
let callCode = (0, max_1.getCountryCallingCode)(options.value);
|
|
@@ -102,11 +102,10 @@ const PhoneNumberField = (props) => {
|
|
|
102
102
|
// <label className="font-medium text-base mb-1" htmlFor={name}>
|
|
103
103
|
// {label}
|
|
104
104
|
// </label>
|
|
105
|
-
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, {
|
|
105
|
+
(0, jsx_runtime_1.jsx)(FieldLabel_1.default, { label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] })) })));
|
|
106
106
|
};
|
|
107
107
|
// const InputGroupField = (props: any) => {
|
|
108
|
-
//
|
|
109
|
-
// } = props;
|
|
108
|
+
// const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate } = props;
|
|
110
109
|
// return (
|
|
111
110
|
// <div className="flex flex-column gap-1">
|
|
112
111
|
// {optional && <label className="font-medium text-base mb-1 w-full flex justify-content-between" htmlFor={name}>{label}<span className="text-base font-medium font-italic text-gray-600">Optional</span></label>}
|
|
@@ -11,7 +11,9 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
|
|
|
11
11
|
// import { Checkbox } from "primereact/checkbox";
|
|
12
12
|
const ListBoxDropdown = ({ selectAll,
|
|
13
13
|
// onSelectAll,
|
|
14
|
-
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
14
|
+
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
15
|
+
// buttonClassName,
|
|
16
|
+
showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }) => {
|
|
15
17
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
16
18
|
// const [inpValue, setInpValue] = useState<any>();
|
|
17
19
|
const optionsMenuRef = (0, react_1.useRef)();
|
|
@@ -96,7 +98,7 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
96
98
|
window.removeEventListener("scroll", handleScroll);
|
|
97
99
|
};
|
|
98
100
|
}, [buttonPosition]);
|
|
99
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className} m-6` }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
|
|
100
102
|
// onMouseLeave={onMouseLeaveMenu}
|
|
101
103
|
id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
|
|
102
104
|
{
|
|
@@ -111,18 +113,19 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
111
113
|
? listBoxclassName
|
|
112
114
|
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
113
115
|
},
|
|
114
|
-
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
116
|
+
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: "list_box_button", link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
|
|
117
|
+
// className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
|
|
118
|
+
// link={link ? true : false}
|
|
119
|
+
icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "list_box_button", text: true }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
|
|
120
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
121
|
+
var _a, _b;
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : ""} ${showRemoveIcon ? "pr-6 relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
|
|
123
|
+
? item[`${optionLabel}`]
|
|
124
|
+
: (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName
|
|
125
|
+
? chipClassName
|
|
126
|
+
: "list_box_chip"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
|
|
127
|
+
? item[`${optionLabel}`]
|
|
128
|
+
: (_b = listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) }));
|
|
129
|
+
})) }))] })))] })) }));
|
|
127
130
|
};
|
|
128
131
|
exports.default = ListBoxDropdown;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ListBoxDropdownTypes } from "../types/type";
|
|
2
|
-
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
2
|
+
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ListBoxDropdown;
|
|
@@ -92,7 +92,6 @@ export interface TextFieldProps {
|
|
|
92
92
|
disabled?: boolean;
|
|
93
93
|
isLoading?: boolean;
|
|
94
94
|
isRequired?: boolean;
|
|
95
|
-
value?: any;
|
|
96
95
|
}
|
|
97
96
|
export interface SCLoaderProps {
|
|
98
97
|
children: ReactElement;
|
|
@@ -124,7 +123,6 @@ export interface NumberFieldProps {
|
|
|
124
123
|
spanClassName?: string;
|
|
125
124
|
inputNumberProps?: any;
|
|
126
125
|
isRequired?: boolean;
|
|
127
|
-
value?: any;
|
|
128
126
|
}
|
|
129
127
|
export interface TextAreaFieldProps {
|
|
130
128
|
errors: any;
|
|
@@ -140,7 +138,6 @@ export interface TextAreaFieldProps {
|
|
|
140
138
|
validate?: any;
|
|
141
139
|
isLoading?: boolean;
|
|
142
140
|
isRequired?: boolean;
|
|
143
|
-
value?: any;
|
|
144
141
|
}
|
|
145
142
|
export interface DropDownFieldProps {
|
|
146
143
|
errors: any;
|
|
@@ -166,7 +163,6 @@ export interface DropDownFieldProps {
|
|
|
166
163
|
panelClassName?: string;
|
|
167
164
|
onFocus?: () => void;
|
|
168
165
|
isRequired?: boolean;
|
|
169
|
-
value?: any;
|
|
170
166
|
}
|
|
171
167
|
export interface MultiSelectProps {
|
|
172
168
|
errors: any;
|
|
@@ -186,7 +182,6 @@ export interface MultiSelectProps {
|
|
|
186
182
|
isLoading?: boolean;
|
|
187
183
|
filter?: boolean;
|
|
188
184
|
isRequired?: boolean;
|
|
189
|
-
value?: any;
|
|
190
185
|
}
|
|
191
186
|
export interface TreeDropdownSelectTypes {
|
|
192
187
|
displayLabelName: string;
|