@kbgarcia8/react-dynamic-form 1.1.39 → 1.1.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAExE,QAAA,MAAM,KAAK,2GAyDT,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),c=require("styled-components"),t={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,medium:500,bold:700,bolder:900},fontSize:{xsmall:"0.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",xlarge:"2rem"},borderThickness:{thin:"0.0625rem",light:"0.125rem"}},K=c.button`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
42
|
-
`,f=({onClick:a,id:
|
|
42
|
+
`,f=({onClick:a,id:i,buttonType:s,source:o,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={}})=>e.jsx(K,{onClick:a,id:i,type:s,className:b,...h,children:e.jsxs(Q,{className:"button-icon-text-space",children:[o?e.jsx(V,{src:o,alt:r}):m||"",d&&e.jsx(X,{id:i,children:d})]})}),Y=c.div`
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: left;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
align-items: center;
|
|
82
82
|
`,ae=c.span`
|
|
83
83
|
font-weight: ${t.fontWeight.light};
|
|
84
|
-
`,R=({htmlFor:a,textLabel:
|
|
84
|
+
`,R=({htmlFor:a,textLabel:i,additionalInfo:s,$labelFlexDirection:o,source:m,svg:r,className:d,children:b})=>e.jsxs(_,{htmlFor:a,className:d,$labelFlexDirection:o,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${a}-label-icon`}):r||""}),e.jsxs(I,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:i}),s&&e.jsx(ae,{className:"additional-info",children:s})]}),b]}),B=c.input`
|
|
85
85
|
display: flex;
|
|
86
86
|
place-content: center;
|
|
87
87
|
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
max-width: 100%;
|
|
112
112
|
resize: none;
|
|
113
113
|
overflow-y: auto;
|
|
114
|
-
`,
|
|
114
|
+
`,D=E.forwardRef((a,i)=>{const{type:s,id:o,onChange:m,isRequired:r,dataAttributes:d={},disabled:b,className:h,name:u}=a;if(s==="textarea"){const{rows:C=5,cols:w=30,value:v,...T}=a;return e.jsx(ne,{ref:i,value:v,rows:C,cols:w,id:o,onChange:m,required:r,disabled:b,...d,className:h,name:u})}if(s==="radio"||s==="checkbox"){const{checked:C,...w}=a;return e.jsx(B,{ref:i,type:s,checked:C,id:o,onChange:m,required:r,...d,disabled:b,className:h,name:u})}const p=a,{value:$,pattern:j,placeholderText:k,...N}=p;return e.jsx(B,{ref:i,type:s,value:$,pattern:j,placeholder:k,id:o,onChange:m,required:r,...d,disabled:b,className:h,name:u})}),F=a=>{const{className:i,type:s,id:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:p,dataAttributes:$,inputClass:j,ref:k,disabled:N,isEditable:C,editIcon:w,onClickEdit:v,deleteIcon:T,onClickDelete:S,idx:A,children:q}=a;return e.jsxs(Y,{className:`${i} ${o.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:g=30,value:l,...y}=a;return e.jsx(D,{id:o,name:o,type:"textarea",isRequired:p,onChange:u,value:l,rows:n,cols:g,dataAttributes:$,className:j,ref:k,disabled:N})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:l,placeholderText:y,...z}=n;return e.jsx(D,{id:o,name:o,placeholderText:y,onChange:u,value:g,type:s,isRequired:p,dataAttributes:$,className:j,ref:k,disabled:N,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(D,{ref:k,type:s,name:o,id:o,isRequired:p,checked:n,onChange:u,disabled:N,className:j,dataAttributes:$}),e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),C&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,svg:w,buttonType:"button",onClick:v,className:`edit-radio-${A}`,dataAttributes:$}),e.jsx(f,{id:`editable-${o}-delete-btn`,svg:T,buttonType:"button",onClick:S,className:`delete-radio-${A}`,dataAttributes:$})]}),q]})},se=c.fieldset`
|
|
115
115
|
padding: 0;
|
|
116
116
|
height: auto;
|
|
117
117
|
width: 100%;
|
|
@@ -131,11 +131,11 @@
|
|
|
131
131
|
display: flex;
|
|
132
132
|
justify-content: space-between;
|
|
133
133
|
width: 100%;
|
|
134
|
-
`,P=({legend:a,fieldsetIndex:
|
|
134
|
+
`,P=({legend:a,fieldsetIndex:i,idx:s,editableInformation:o,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),o?.map((h,u)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(D,{id:`editable-option-${u}`,name:`editable-option-${u}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":u,"data-fieldsetindex":i,"data-key":h.info}})},`${h.name}-${u}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetindex":i}})]})]}),ce=c.div`
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: space-between;
|
|
137
137
|
max-width: 100%;
|
|
138
|
-
`,re=({id:a,hasSubmit:
|
|
138
|
+
`,re=({id:a,hasSubmit:i,submitText:s,handleSubmit:o,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:u})=>e.jsxs(ce,{className:"form-main-button-container",children:[i&&e.jsx(f,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:o,className:"submit-form-btn"}),m&&e.jsx(f,{id:`form-${a}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx(f,{id:`form-${a}-cancel`,buttonType:"button",text:h??"Cancel",onClick:u,className:"cancel-form-btn"})]}),W=c.legend`
|
|
139
139
|
font-size: ${t.spacing.medium};
|
|
140
140
|
font-weight: 500;
|
|
141
141
|
margin-bottom: ${t.spacing.small};
|
|
@@ -174,4 +174,4 @@
|
|
|
174
174
|
flex-direction: column;
|
|
175
175
|
align-items: center;
|
|
176
176
|
justify-content: center;
|
|
177
|
-
`,xe=({fieldsets:a=null,legendText:
|
|
177
|
+
`,xe=({fieldsets:a=null,legendText:i,isExpandable:s,id:o,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:p=!1,submitText:$,handleSubmit:j,hasReset:k=!1,resetText:N,handleReset:C,hasCancel:w=!1,cancelText:v,handleCancel:T,handleSubmitForm:S,className:A,children:q})=>e.jsxs(de,{id:`${o}-form`,className:A,onSubmit:S,children:[a?a.map((n,g)=>e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset-${g}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,y)=>e.jsxs(E.Fragment,{children:[l.type==="textarea"&&e.jsx(F,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:y,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(F,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:y,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:y,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:y,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${o}-${y}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${n.legend}-${g}`)):e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset`,className:`${i}-fieldset`,children:[i&&e.jsx(W,{className:`${i}-legend`,children:i}),!a&&m&&m.length!==0?m.map((n,g)=>e.jsxs(E.Fragment,{children:[n.type==="textarea"&&e.jsx(F,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(F,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${i}`,idx:g,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${o}-${g}`)):s?e.jsx(O,{children:`No entry yet on ${i}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${i}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(re,{id:o,hasSubmit:p,submitText:$,handleSubmit:j,hasReset:k,resetText:N,handleReset:C,hasCancel:w,cancelText:v,handleCancel:T}),e.jsx(me,{className:"children-container",children:q})]}),be=a=>{const i=/^#([0-9A-Fa-f]{3}){1,2}$/,s=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return i.test(a)||s.test(a)||CSS.supports("color",a)},x=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},J={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},L=E.createContext({}),ue=({children:a,initialTheme:i=G,secondTheme:s=J})=>{const[o,m]=E.useState(i),r=()=>{m(d=>d===i?s:i)};return e.jsx(L.Provider,{value:{currentTheme:o,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:o,children:a})})},ge=()=>E.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ge;
|
|
@@ -75,9 +75,9 @@ const e = {
|
|
|
75
75
|
justify-content: center;
|
|
76
76
|
`, x = ({
|
|
77
77
|
onClick: t,
|
|
78
|
-
id:
|
|
78
|
+
id: l,
|
|
79
79
|
buttonType: o,
|
|
80
|
-
source:
|
|
80
|
+
source: i,
|
|
81
81
|
svg: m,
|
|
82
82
|
alt: c = "alt-button-icon",
|
|
83
83
|
text: d = "",
|
|
@@ -87,13 +87,13 @@ const e = {
|
|
|
87
87
|
Z,
|
|
88
88
|
{
|
|
89
89
|
onClick: t,
|
|
90
|
-
id:
|
|
90
|
+
id: l,
|
|
91
91
|
type: o,
|
|
92
92
|
className: h,
|
|
93
93
|
...u,
|
|
94
94
|
children: /* @__PURE__ */ f(_, { className: "button-icon-text-space", children: [
|
|
95
|
-
|
|
96
|
-
d && /* @__PURE__ */ a(ee, { id:
|
|
95
|
+
i ? /* @__PURE__ */ a(I, { src: i, alt: c }) : m || "",
|
|
96
|
+
d && /* @__PURE__ */ a(ee, { id: l, children: d })
|
|
97
97
|
] })
|
|
98
98
|
}
|
|
99
99
|
), te = r.div`
|
|
@@ -140,17 +140,17 @@ const e = {
|
|
|
140
140
|
font-weight: ${e.fontWeight.light};
|
|
141
141
|
`, B = ({
|
|
142
142
|
htmlFor: t,
|
|
143
|
-
textLabel:
|
|
143
|
+
textLabel: l,
|
|
144
144
|
additionalInfo: o,
|
|
145
|
-
$labelFlexDirection:
|
|
145
|
+
$labelFlexDirection: i,
|
|
146
146
|
source: m,
|
|
147
147
|
svg: c,
|
|
148
148
|
className: d,
|
|
149
149
|
children: h
|
|
150
|
-
}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection:
|
|
150
|
+
}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection: i, children: [
|
|
151
151
|
(m || c) && /* @__PURE__ */ a(le, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : c || "" }),
|
|
152
152
|
/* @__PURE__ */ f(oe, { className: "label-text-container", children: [
|
|
153
|
-
/* @__PURE__ */ a(ie, { className: "main-label", children:
|
|
153
|
+
/* @__PURE__ */ a(ie, { className: "main-label", children: l }),
|
|
154
154
|
o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
|
|
155
155
|
] }),
|
|
156
156
|
h
|
|
@@ -184,120 +184,125 @@ const e = {
|
|
|
184
184
|
max-width: 100%;
|
|
185
185
|
resize: none;
|
|
186
186
|
overflow-y: auto;
|
|
187
|
-
`,
|
|
188
|
-
const { type: o, id:
|
|
187
|
+
`, S = K((t, l) => {
|
|
188
|
+
const { type: o, id: i, onChange: m, isRequired: c, dataAttributes: d = {}, disabled: h, className: u, name: g } = t;
|
|
189
189
|
if (o === "textarea") {
|
|
190
|
-
const { rows:
|
|
190
|
+
const { rows: w = 5, cols: E = 30, value: A, ...T } = t;
|
|
191
191
|
return /* @__PURE__ */ a(
|
|
192
192
|
ce,
|
|
193
193
|
{
|
|
194
|
+
ref: l,
|
|
195
|
+
value: A,
|
|
196
|
+
rows: w,
|
|
197
|
+
cols: E,
|
|
198
|
+
id: i,
|
|
194
199
|
onChange: m,
|
|
195
|
-
value: v,
|
|
196
|
-
rows: y,
|
|
197
|
-
cols: F,
|
|
198
|
-
className: u,
|
|
199
|
-
ref: i,
|
|
200
|
-
disabled: h,
|
|
201
200
|
required: c,
|
|
202
|
-
|
|
203
|
-
...d
|
|
201
|
+
disabled: h,
|
|
202
|
+
...d,
|
|
203
|
+
className: u,
|
|
204
|
+
name: g
|
|
204
205
|
}
|
|
205
206
|
);
|
|
206
207
|
}
|
|
207
208
|
if (o === "radio" || o === "checkbox") {
|
|
208
|
-
const { checked:
|
|
209
|
+
const { checked: w, ...E } = t;
|
|
209
210
|
return /* @__PURE__ */ a(
|
|
210
211
|
W,
|
|
211
212
|
{
|
|
212
|
-
ref:
|
|
213
|
-
|
|
213
|
+
ref: l,
|
|
214
|
+
type: o,
|
|
215
|
+
checked: w,
|
|
216
|
+
id: i,
|
|
214
217
|
onChange: m,
|
|
218
|
+
required: c,
|
|
219
|
+
...d,
|
|
215
220
|
disabled: h,
|
|
216
221
|
className: u,
|
|
217
|
-
|
|
218
|
-
...F,
|
|
219
|
-
...d
|
|
222
|
+
name: g
|
|
220
223
|
}
|
|
221
224
|
);
|
|
222
225
|
}
|
|
223
|
-
const
|
|
226
|
+
const k = t, { value: p, pattern: N, placeholderText: C, ...F } = k;
|
|
224
227
|
return /* @__PURE__ */ a(
|
|
225
228
|
W,
|
|
226
229
|
{
|
|
230
|
+
ref: l,
|
|
231
|
+
type: o,
|
|
232
|
+
value: p,
|
|
233
|
+
pattern: N,
|
|
227
234
|
placeholder: C,
|
|
235
|
+
id: i,
|
|
228
236
|
onChange: m,
|
|
229
|
-
value: N,
|
|
230
237
|
required: c,
|
|
231
|
-
|
|
232
|
-
ref: i,
|
|
238
|
+
...d,
|
|
233
239
|
disabled: h,
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
...d
|
|
240
|
+
className: u,
|
|
241
|
+
name: g
|
|
237
242
|
}
|
|
238
243
|
);
|
|
239
|
-
}),
|
|
244
|
+
}), v = (t) => {
|
|
240
245
|
const {
|
|
241
|
-
className:
|
|
246
|
+
className: l,
|
|
242
247
|
type: o,
|
|
243
|
-
id:
|
|
248
|
+
id: i,
|
|
244
249
|
textLabel: m,
|
|
245
250
|
additionalInfo: c,
|
|
246
251
|
$labelFlexDirection: d,
|
|
247
252
|
svg: h,
|
|
248
253
|
labelClass: u,
|
|
249
254
|
onChange: g,
|
|
250
|
-
isRequired:
|
|
255
|
+
isRequired: k,
|
|
251
256
|
dataAttributes: p,
|
|
252
|
-
inputClass:
|
|
253
|
-
ref:
|
|
254
|
-
disabled:
|
|
255
|
-
isEditable:
|
|
256
|
-
editIcon:
|
|
257
|
+
inputClass: N,
|
|
258
|
+
ref: C,
|
|
259
|
+
disabled: F,
|
|
260
|
+
isEditable: w,
|
|
261
|
+
editIcon: E,
|
|
257
262
|
onClickEdit: A,
|
|
258
|
-
deleteIcon:
|
|
263
|
+
deleteIcon: T,
|
|
259
264
|
onClickDelete: z,
|
|
260
|
-
idx:
|
|
265
|
+
idx: D,
|
|
261
266
|
children: j
|
|
262
267
|
} = t;
|
|
263
|
-
return /* @__PURE__ */ f(te, { className: `${
|
|
264
|
-
o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor:
|
|
268
|
+
return /* @__PURE__ */ f(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
|
|
269
|
+
o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: i, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u }),
|
|
265
270
|
o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
|
|
266
|
-
const { rows: n = 5, cols: $ = 30, value: s, ...
|
|
271
|
+
const { rows: n = 5, cols: $ = 30, value: s, ...y } = t;
|
|
267
272
|
return /* @__PURE__ */ a(
|
|
268
|
-
|
|
273
|
+
S,
|
|
269
274
|
{
|
|
270
|
-
id:
|
|
271
|
-
name:
|
|
275
|
+
id: i,
|
|
276
|
+
name: i,
|
|
272
277
|
type: "textarea",
|
|
273
|
-
isRequired:
|
|
278
|
+
isRequired: k,
|
|
274
279
|
onChange: g,
|
|
275
280
|
value: s,
|
|
276
281
|
rows: n,
|
|
277
282
|
cols: $,
|
|
278
283
|
dataAttributes: p,
|
|
279
|
-
className:
|
|
280
|
-
ref:
|
|
281
|
-
disabled:
|
|
284
|
+
className: N,
|
|
285
|
+
ref: C,
|
|
286
|
+
disabled: F
|
|
282
287
|
}
|
|
283
288
|
);
|
|
284
289
|
})(),
|
|
285
290
|
o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
|
|
286
|
-
const n = t, { value: $, pattern: s, placeholderText:
|
|
291
|
+
const n = t, { value: $, pattern: s, placeholderText: y, ...L } = n;
|
|
287
292
|
return /* @__PURE__ */ a(
|
|
288
|
-
|
|
293
|
+
S,
|
|
289
294
|
{
|
|
290
|
-
id:
|
|
291
|
-
name:
|
|
292
|
-
placeholderText:
|
|
295
|
+
id: i,
|
|
296
|
+
name: i,
|
|
297
|
+
placeholderText: y,
|
|
293
298
|
onChange: g,
|
|
294
299
|
value: $,
|
|
295
300
|
type: o,
|
|
296
|
-
isRequired:
|
|
301
|
+
isRequired: k,
|
|
297
302
|
dataAttributes: p,
|
|
298
|
-
className:
|
|
299
|
-
ref:
|
|
300
|
-
disabled:
|
|
303
|
+
className: N,
|
|
304
|
+
ref: C,
|
|
305
|
+
disabled: F,
|
|
301
306
|
pattern: s
|
|
302
307
|
}
|
|
303
308
|
);
|
|
@@ -306,26 +311,26 @@ const e = {
|
|
|
306
311
|
const { checked: n, ...$ } = t;
|
|
307
312
|
return /* @__PURE__ */ f(q, { children: [
|
|
308
313
|
/* @__PURE__ */ a(
|
|
309
|
-
|
|
314
|
+
S,
|
|
310
315
|
{
|
|
311
|
-
ref:
|
|
316
|
+
ref: C,
|
|
312
317
|
type: o,
|
|
313
|
-
name:
|
|
314
|
-
id:
|
|
315
|
-
isRequired:
|
|
318
|
+
name: i,
|
|
319
|
+
id: i,
|
|
320
|
+
isRequired: k,
|
|
316
321
|
checked: n,
|
|
317
322
|
onChange: g,
|
|
318
|
-
disabled:
|
|
319
|
-
className:
|
|
323
|
+
disabled: F,
|
|
324
|
+
className: N,
|
|
320
325
|
dataAttributes: p
|
|
321
326
|
}
|
|
322
327
|
),
|
|
323
|
-
/* @__PURE__ */ a(B, { htmlFor:
|
|
328
|
+
/* @__PURE__ */ a(B, { htmlFor: i, textLabel: m, additionalInfo: c, $labelFlexDirection: d, svg: h, className: u })
|
|
324
329
|
] });
|
|
325
330
|
})(),
|
|
326
|
-
|
|
327
|
-
/* @__PURE__ */ a(x, { id: `editable-${
|
|
328
|
-
/* @__PURE__ */ a(x, { id: `editable-${
|
|
331
|
+
w && /* @__PURE__ */ f(ae, { className: "input-edit-buttons", children: [
|
|
332
|
+
/* @__PURE__ */ a(x, { id: `editable-${i}-edit-btn`, svg: E, buttonType: "button", onClick: A, className: `edit-radio-${D}`, dataAttributes: p }),
|
|
333
|
+
/* @__PURE__ */ a(x, { id: `editable-${i}-delete-btn`, svg: T, buttonType: "button", onClick: z, className: `delete-radio-${D}`, dataAttributes: p })
|
|
329
334
|
] }),
|
|
330
335
|
j
|
|
331
336
|
] });
|
|
@@ -351,17 +356,17 @@ const e = {
|
|
|
351
356
|
width: 100%;
|
|
352
357
|
`, P = ({
|
|
353
358
|
legend: t,
|
|
354
|
-
fieldsetIndex:
|
|
359
|
+
fieldsetIndex: l,
|
|
355
360
|
idx: o,
|
|
356
|
-
editableInformation:
|
|
361
|
+
editableInformation: i,
|
|
357
362
|
onChangeOfEditableOption: m,
|
|
358
363
|
onClickSaveEdit: c,
|
|
359
364
|
onClickCancelEdit: d,
|
|
360
365
|
onClickDeleteEntry: h
|
|
361
366
|
}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
|
|
362
367
|
/* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
|
|
363
|
-
|
|
364
|
-
|
|
368
|
+
i?.map((u, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
|
|
369
|
+
S,
|
|
365
370
|
{
|
|
366
371
|
id: `editable-option-${g}`,
|
|
367
372
|
name: `editable-option-${g}`,
|
|
@@ -373,15 +378,15 @@ const e = {
|
|
|
373
378
|
className: "editable-option",
|
|
374
379
|
dataAttributes: {
|
|
375
380
|
"data-index": g,
|
|
376
|
-
"data-fieldsetindex":
|
|
381
|
+
"data-fieldsetindex": l,
|
|
377
382
|
"data-key": u.info
|
|
378
383
|
}
|
|
379
384
|
}
|
|
380
385
|
) }, `${u.name}-${g}`)),
|
|
381
386
|
/* @__PURE__ */ f(be, { className: "editable-option-button-space", children: [
|
|
382
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: c, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex":
|
|
383
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex":
|
|
384
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex":
|
|
387
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: c, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
|
|
388
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
|
|
389
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } })
|
|
385
390
|
] })
|
|
386
391
|
] }), he = r.div`
|
|
387
392
|
display: flex;
|
|
@@ -389,9 +394,9 @@ const e = {
|
|
|
389
394
|
max-width: 100%;
|
|
390
395
|
`, ue = ({
|
|
391
396
|
id: t,
|
|
392
|
-
hasSubmit:
|
|
397
|
+
hasSubmit: l,
|
|
393
398
|
submitText: o,
|
|
394
|
-
handleSubmit:
|
|
399
|
+
handleSubmit: i,
|
|
395
400
|
hasReset: m,
|
|
396
401
|
resetText: c,
|
|
397
402
|
handleReset: d,
|
|
@@ -399,7 +404,7 @@ const e = {
|
|
|
399
404
|
cancelText: u,
|
|
400
405
|
handleCancel: g
|
|
401
406
|
}) => /* @__PURE__ */ f(he, { className: "form-main-button-container", children: [
|
|
402
|
-
|
|
407
|
+
l && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
|
|
403
408
|
m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: c ?? "Reset", onClick: d, className: "reset-form-btn" }),
|
|
404
409
|
h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: u ?? "Cancel", onClick: g, className: "cancel-form-btn" })
|
|
405
410
|
] }), M = r.legend`
|
|
@@ -443,63 +448,63 @@ const e = {
|
|
|
443
448
|
justify-content: center;
|
|
444
449
|
`, Ce = ({
|
|
445
450
|
fieldsets: t = null,
|
|
446
|
-
legendText:
|
|
451
|
+
legendText: l,
|
|
447
452
|
isExpandable: o,
|
|
448
|
-
id:
|
|
453
|
+
id: i,
|
|
449
454
|
formInputs: m,
|
|
450
455
|
labelAndInputContainerClass: c,
|
|
451
456
|
labelClass: d,
|
|
452
457
|
inputClass: h,
|
|
453
458
|
onChangeOfEditableOption: u,
|
|
454
459
|
handleAddingInputEntry: g,
|
|
455
|
-
hasSubmit:
|
|
460
|
+
hasSubmit: k = !1,
|
|
456
461
|
submitText: p,
|
|
457
|
-
handleSubmit:
|
|
458
|
-
hasReset:
|
|
459
|
-
resetText:
|
|
460
|
-
handleReset:
|
|
461
|
-
hasCancel:
|
|
462
|
+
handleSubmit: N,
|
|
463
|
+
hasReset: C = !1,
|
|
464
|
+
resetText: F,
|
|
465
|
+
handleReset: w,
|
|
466
|
+
hasCancel: E = !1,
|
|
462
467
|
cancelText: A,
|
|
463
|
-
handleCancel:
|
|
468
|
+
handleCancel: T,
|
|
464
469
|
handleSubmitForm: z,
|
|
465
|
-
className:
|
|
470
|
+
className: D,
|
|
466
471
|
children: j
|
|
467
|
-
}) => /* @__PURE__ */ f(fe, { id: `${
|
|
468
|
-
t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${
|
|
469
|
-
/* @__PURE__ */ f(U, { id: `${
|
|
472
|
+
}) => /* @__PURE__ */ f(fe, { id: `${i}-form`, className: D, onSubmit: z, children: [
|
|
473
|
+
t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${i}-fieldset-wrapper`, children: [
|
|
474
|
+
/* @__PURE__ */ f(U, { id: `${i}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
|
|
470
475
|
n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
|
|
471
|
-
n.inputs.length !== 0 ? n.inputs.map((s,
|
|
476
|
+
n.inputs.length !== 0 ? n.inputs.map((s, y) => /* @__PURE__ */ f(R.Fragment, { children: [
|
|
472
477
|
s.type === "textarea" && /* @__PURE__ */ a(
|
|
473
|
-
|
|
478
|
+
v,
|
|
474
479
|
{
|
|
475
480
|
...s,
|
|
476
481
|
id: s.id ?? `${n.legend}-input`,
|
|
477
482
|
labelClass: d,
|
|
478
483
|
inputClass: h,
|
|
479
|
-
idx:
|
|
484
|
+
idx: y,
|
|
480
485
|
className: `${c} ${s?.uniqueClass}`
|
|
481
486
|
}
|
|
482
487
|
),
|
|
483
488
|
s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ a(
|
|
484
|
-
|
|
489
|
+
v,
|
|
485
490
|
{
|
|
486
491
|
...s,
|
|
487
492
|
id: s.id ?? `${n.legend}-input`,
|
|
488
493
|
labelClass: d,
|
|
489
494
|
inputClass: h,
|
|
490
|
-
idx:
|
|
495
|
+
idx: y,
|
|
491
496
|
className: `${c} ${s?.uniqueClass}`
|
|
492
497
|
}
|
|
493
498
|
),
|
|
494
499
|
(s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
|
|
495
500
|
/* @__PURE__ */ a(
|
|
496
|
-
|
|
501
|
+
v,
|
|
497
502
|
{
|
|
498
503
|
...s,
|
|
499
504
|
id: s.id ?? `${n.legend}-input`,
|
|
500
505
|
labelClass: d,
|
|
501
506
|
inputClass: h,
|
|
502
|
-
idx:
|
|
507
|
+
idx: y,
|
|
503
508
|
className: `${c} ${s?.uniqueClass}`
|
|
504
509
|
}
|
|
505
510
|
),
|
|
@@ -508,7 +513,7 @@ const e = {
|
|
|
508
513
|
{
|
|
509
514
|
legend: `${n.legend}`,
|
|
510
515
|
fieldsetIndex: $,
|
|
511
|
-
idx:
|
|
516
|
+
idx: y,
|
|
512
517
|
editableInformation: s?.editableInformation || [],
|
|
513
518
|
onChangeOfEditableOption: u,
|
|
514
519
|
onClickSaveEdit: s?.onClickSave || ((L) => {
|
|
@@ -520,18 +525,18 @@ const e = {
|
|
|
520
525
|
}
|
|
521
526
|
)
|
|
522
527
|
] })
|
|
523
|
-
] }, `form-${
|
|
528
|
+
] }, `form-${i}-${y}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
|
|
524
529
|
] }),
|
|
525
530
|
n.isExpandable && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
|
|
526
|
-
] }, `${n.legend}-${$}`)) : /* @__PURE__ */ f(H, { className: `${
|
|
527
|
-
/* @__PURE__ */ f(U, { id: `${
|
|
528
|
-
|
|
531
|
+
] }, `${n.legend}-${$}`)) : /* @__PURE__ */ f(H, { className: `${i}-fieldset-wrapper`, children: [
|
|
532
|
+
/* @__PURE__ */ f(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
|
|
533
|
+
l && /* @__PURE__ */ a(M, { className: `${l}-legend`, children: l }),
|
|
529
534
|
!t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ f(R.Fragment, { children: [
|
|
530
535
|
n.type === "textarea" && /* @__PURE__ */ a(
|
|
531
|
-
|
|
536
|
+
v,
|
|
532
537
|
{
|
|
533
538
|
...n,
|
|
534
|
-
id: n.id ?? `${
|
|
539
|
+
id: n.id ?? `${l}-input`,
|
|
535
540
|
labelClass: d,
|
|
536
541
|
inputClass: h,
|
|
537
542
|
idx: $,
|
|
@@ -539,10 +544,10 @@ const e = {
|
|
|
539
544
|
}
|
|
540
545
|
),
|
|
541
546
|
n.type !== "textarea" && n.type !== "radio" && n.type !== "checkbox" && /* @__PURE__ */ a(
|
|
542
|
-
|
|
547
|
+
v,
|
|
543
548
|
{
|
|
544
549
|
...n,
|
|
545
|
-
id: n.id ?? `${
|
|
550
|
+
id: n.id ?? `${l}-input`,
|
|
546
551
|
labelClass: d,
|
|
547
552
|
inputClass: h,
|
|
548
553
|
idx: $,
|
|
@@ -551,10 +556,10 @@ const e = {
|
|
|
551
556
|
),
|
|
552
557
|
(n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ f(q, { children: [
|
|
553
558
|
/* @__PURE__ */ a(
|
|
554
|
-
|
|
559
|
+
v,
|
|
555
560
|
{
|
|
556
561
|
...n,
|
|
557
|
-
id: n.id ?? `${
|
|
562
|
+
id: n.id ?? `${l}-input`,
|
|
558
563
|
labelClass: d,
|
|
559
564
|
inputClass: h,
|
|
560
565
|
idx: $,
|
|
@@ -564,7 +569,7 @@ const e = {
|
|
|
564
569
|
n.editing && n.isEditable && /* @__PURE__ */ a(
|
|
565
570
|
P,
|
|
566
571
|
{
|
|
567
|
-
legend: `${
|
|
572
|
+
legend: `${l}`,
|
|
568
573
|
idx: $,
|
|
569
574
|
editableInformation: n?.editableInformation,
|
|
570
575
|
onChangeOfEditableOption: u,
|
|
@@ -577,29 +582,29 @@ const e = {
|
|
|
577
582
|
}
|
|
578
583
|
)
|
|
579
584
|
] })
|
|
580
|
-
] }, `form-${
|
|
585
|
+
] }, `form-${i}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
|
|
581
586
|
] }),
|
|
582
|
-
o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${
|
|
587
|
+
o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
|
|
583
588
|
] }),
|
|
584
589
|
/* @__PURE__ */ a(
|
|
585
590
|
ue,
|
|
586
591
|
{
|
|
587
|
-
id:
|
|
588
|
-
hasSubmit:
|
|
592
|
+
id: i,
|
|
593
|
+
hasSubmit: k,
|
|
589
594
|
submitText: p,
|
|
590
|
-
handleSubmit:
|
|
591
|
-
hasReset:
|
|
592
|
-
resetText:
|
|
593
|
-
handleReset:
|
|
594
|
-
hasCancel:
|
|
595
|
+
handleSubmit: N,
|
|
596
|
+
hasReset: C,
|
|
597
|
+
resetText: F,
|
|
598
|
+
handleReset: w,
|
|
599
|
+
hasCancel: E,
|
|
595
600
|
cancelText: A,
|
|
596
|
-
handleCancel:
|
|
601
|
+
handleCancel: T
|
|
597
602
|
}
|
|
598
603
|
),
|
|
599
604
|
/* @__PURE__ */ a(ge, { className: "children-container", children: j })
|
|
600
605
|
] }), $e = (t) => {
|
|
601
|
-
const
|
|
602
|
-
return
|
|
606
|
+
const l = /^#([0-9A-Fa-f]{3}){1,2}$/, o = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
|
|
607
|
+
return l.test(t) || o.test(t) || CSS.supports("color", t);
|
|
603
608
|
}, b = (t) => {
|
|
604
609
|
if (!$e(t)) throw new Error(`Invalid color: ${t}`);
|
|
605
610
|
return t;
|
|
@@ -644,13 +649,13 @@ const e = {
|
|
|
644
649
|
}
|
|
645
650
|
}, J = Q({}), Fe = ({
|
|
646
651
|
children: t,
|
|
647
|
-
initialTheme:
|
|
652
|
+
initialTheme: l = xe,
|
|
648
653
|
secondTheme: o = pe
|
|
649
654
|
}) => {
|
|
650
|
-
const [
|
|
651
|
-
m((d) => d ===
|
|
655
|
+
const [i, m] = V(l), c = () => {
|
|
656
|
+
m((d) => d === l ? o : l);
|
|
652
657
|
};
|
|
653
|
-
return /* @__PURE__ */ a(J.Provider, { value: { currentTheme:
|
|
658
|
+
return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: i, toggleTheme: c }, children: /* @__PURE__ */ a(Y, { theme: i, children: t }) });
|
|
654
659
|
}, Ee = () => X(J);
|
|
655
660
|
export {
|
|
656
661
|
Ce as DynamicForm,
|