@kbgarcia8/react-dynamic-form 1.1.2 → 1.1.3
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":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,gFAUd,WAAW,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,gFAUd,WAAW,4CAgBZ,CAAA;AAED,eAAe,MAAM,CAAC"}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
42
|
-
|
|
42
|
+
`,g=({onClick:t,id:o,buttonType:i,source:s,svg:r,alt:d="alt-button-icon",text:m="",className:l="",dataAttributes:b={}})=>e.jsx(V,{onClick:t,id:o,type:i,className:l,...b,children:e.jsxs(X,{className:"button-icon-text-space",children:[s?e.jsx(Y,{src:s,alt:d}):r||"",m&&e.jsx(Z,{id:o,children:m})]})}),_=c.div`
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: left;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
max-width: 100%;
|
|
106
106
|
resize: none;
|
|
107
107
|
overflow-y: auto;
|
|
108
|
-
`,z=v.forwardRef((t,o)=>{const{type:i,id:s,onChange:r,isRequired:d,dataAttributes:m,disabled:l,className:b}=t;if(i==="textarea"){const{rows:j=5,cols:N=30,value:T,...A}=t;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:N,...m,className:b,ref:o,disabled:l,required:d})}if(i==="radio"||i==="checkbox"){const{checked:j,...N}=t;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:l,className:b,...m})}const
|
|
108
|
+
`,z=v.forwardRef((t,o)=>{const{type:i,id:s,onChange:r,isRequired:d,dataAttributes:m,disabled:l,className:b}=t;if(i==="textarea"){const{rows:j=5,cols:N=30,value:T,...A}=t;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:N,...m,className:b,ref:o,disabled:l,required:d})}if(i==="radio"||i==="checkbox"){const{checked:j,...N}=t;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:l,className:b,...m})}const u=t,{value:y,pattern:f,placeholderText:p,...C}=u;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:i,required:d,...m,className:b,ref:o,disabled:l,pattern:f})}),F=t=>{const{className:o,type:i,id:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,labelClass:b,onChange:u,isRequired:y,dataAttributes:f,inputClass:p,ref:C,disabled:j,isEditable:N,editIcon:T,onClickEdit:A,deleteIcon:R,onClickDelete:B,idx:S,children:q}=t;return e.jsxs(_,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[i!=="radio"&&i!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b}),i!=="radio"&&i!=="checkbox"&&i==="textarea"&&(()=>{const{rows:k=5,cols:w=30,value:D,...a}=t;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:u,value:D,rows:k,cols:w,dataAttributes:f,className:p,ref:C,disabled:j})})(),i!=="radio"&&i!=="checkbox"&&i!=="textarea"&&(()=>{const k=t,{value:w,pattern:D,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:u,value:w,type:i,isRequired:y,dataAttributes:f,className:p,ref:C,disabled:j,pattern:D})})(),(i==="radio"||i==="checkbox")&&(()=>{const{checked:k,...w}=t;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:u,disabled:j,className:p,dataAttributes:f}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:d,$labelFlexDirection:m,svg:l,className:b})]})})(),N&&e.jsxs(I,{className:"input-edit-buttons",children:[e.jsx(g,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:A,className:`edit-radio-${S}`,dataAttributes:f}),e.jsx(g,{id:`editable-${s}-delete-btn`,svg:R,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:f})]}),q]})},se=c.fieldset`
|
|
109
109
|
padding: 0;
|
|
110
110
|
height: auto;
|
|
111
111
|
width: 100%;
|
|
@@ -125,11 +125,11 @@
|
|
|
125
125
|
display: flex;
|
|
126
126
|
justify-content: space-between;
|
|
127
127
|
width: 100%;
|
|
128
|
-
`,M=({legend:t,idx:o,editableInformation:i,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(ie,{children:`${t} ${o+1}`}),i.map((l,b)=>e.jsx(le,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:l.name.charAt(0).toUpperCase()+l.name.slice(1),onChange:s,value:l.info,type:l.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":l.info}})},`${l.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(
|
|
128
|
+
`,M=({legend:t,idx:o,editableInformation:i,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:m})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(ie,{children:`${t} ${o+1}`}),i.map((l,b)=>e.jsx(le,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:l.name.charAt(0).toUpperCase()+l.name.slice(1),onChange:s,value:l.info,type:l.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":l.info}})},`${l.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(g,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(g,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(g,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:m,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
|
|
129
129
|
display: flex;
|
|
130
130
|
justify-content: space-between;
|
|
131
131
|
max-width: 100%;
|
|
132
|
-
`,de=({id:t,hasSubmit:o,submitText:i,handleSubmit:s,hasEdit:r,editText:d,handleEdit:m,hasCancel:l,cancelText:b,handleCancel:
|
|
132
|
+
`,de=({id:t,hasSubmit:o,submitText:i,handleSubmit:s,hasEdit:r,editText:d,handleEdit:m,hasCancel:l,cancelText:b,handleCancel:u,hasDelete:y,deleteText:f,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(g,{id:`form-${t}-submit`,buttonType:"submit",text:i??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(g,{id:`form-${t}-edit`,buttonType:"button",text:d??"Edit",onClick:m,className:"edit-form-btn"}),l&&e.jsx(g,{id:`form-${t}-cancel`,buttonType:"button",text:b??"Cancel",onClick:u,className:"cancel-form-btn"}),y&&e.jsx(g,{id:`form-${t}-delete`,buttonType:"button",text:f??"Delete",onClick:p,className:"delete-form-btn"})]}),U=c.legend`
|
|
133
133
|
font-size: ${n.spacing.medium};
|
|
134
134
|
font-weight: 500;
|
|
135
135
|
margin-bottom: ${n.spacing.small};
|
|
@@ -168,4 +168,4 @@
|
|
|
168
168
|
flex-direction: column;
|
|
169
169
|
align-items: center;
|
|
170
170
|
justify-content: center;
|
|
171
|
-
`,be=({fieldsets:t=null,legendText:o,isExpandable:i,id:s,formInputs:r,labelAndInputContainerClass:d,labelClass:m,inputClass:l,handleEditableInputEntryChange:b,handleAddingInputEntry:
|
|
171
|
+
`,be=({fieldsets:t=null,legendText:o,isExpandable:i,id:s,formInputs:r,labelAndInputContainerClass:d,labelClass:m,inputClass:l,handleEditableInputEntryChange:b,handleAddingInputEntry:u,hasSubmit:y=!1,hasCancel:f=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:N,handleSubmit:T,cancelText:A,handleCancel:R,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:w,children:D})=>e.jsxs(me,{id:`${s}-form`,className:w,onSubmit:N,children:[t?t.map((a,$)=>e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(U,{children:a.legend}),a.inputs.length!==0?a.inputs.map((h,E)=>e.jsxs(v.Fragment,{children:[h.type==="textarea"&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),(h.type==="radio"||h.type==="checkbox")&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),h.type!=="textarea"&&h.type!=="radio"&&h.type!=="checkbox"&&e.jsx(F,{...h,id:h.id??`${a.legend}-input`,labelClass:m,inputClass:l,idx:E,className:d}),h.isEditable&&h.editing&&e.jsx(M,{legend:`${a.legend} ${E+1}`,idx:E,editableInformation:h?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:h?.onClickSave,onClickCancelEdit:h?.onClickCancel,onClickDeleteEntry:h?.onClickDelete})]},`form-${s}-${E}`)):a.isExpandable?e.jsx(J,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.isExpandable&&e.jsx(K,{className:"add-input-button-space",children:e.jsx(g,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(G,{children:[e.jsxs(H,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(U,{children:o}),!t&&r&&r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(F,{...a,id:a.id??`${o}-input`,labelClass:m,inputClass:l,idx:$,className:d}),a.isEditable&&a.editing&&e.jsx(M,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):i?e.jsx(J,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),i&&e.jsx(K,{className:"add-input-button-space",children:e.jsx(g,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:f,cancelText:A,handleCancel:R,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(xe,{className:"children-container",children:D})]}),he=t=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,i=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(t)||i.test(t)||CSS.supports("color",t)},x=t=>{if(!he(t))throw new Error(`Invalid color: ${t}`);return t},fe={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},L={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")}},Q={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")}},O=v.createContext(void 0),ge=({children:t})=>{const[o,i]=v.useState(L),s=()=>{i(r=>r===L?Q:L)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:t})})},ue=()=>v.useContext(O);exports.DynamicForm=be;exports.ThemeContext=O;exports.ThemeContextProvider=ge;exports.breakpoints=fe;exports.darkTheme=Q;exports.lightTheme=L;exports.useTheme=ue;
|
|
@@ -73,7 +73,7 @@ const n = {
|
|
|
73
73
|
display: flex;
|
|
74
74
|
align-items: center;
|
|
75
75
|
justify-content: center;
|
|
76
|
-
`,
|
|
76
|
+
`, x = ({
|
|
77
77
|
onClick: e,
|
|
78
78
|
id: o,
|
|
79
79
|
buttonType: l,
|
|
@@ -83,25 +83,20 @@ const n = {
|
|
|
83
83
|
text: m = "",
|
|
84
84
|
className: c = "",
|
|
85
85
|
dataAttributes: h = {}
|
|
86
|
-
}) =>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
m && /* @__PURE__ */ t(ae, { id: o, children: m })
|
|
101
|
-
] })
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
}, oe = s.div`
|
|
86
|
+
}) => /* @__PURE__ */ t(
|
|
87
|
+
ee,
|
|
88
|
+
{
|
|
89
|
+
onClick: e,
|
|
90
|
+
id: o,
|
|
91
|
+
type: l,
|
|
92
|
+
className: c,
|
|
93
|
+
...h,
|
|
94
|
+
children: /* @__PURE__ */ g(te, { className: "button-icon-text-space", children: [
|
|
95
|
+
i ? /* @__PURE__ */ t(ne, { src: i, alt: d }) : r || "",
|
|
96
|
+
m && /* @__PURE__ */ t(ae, { id: o, children: m })
|
|
97
|
+
] })
|
|
98
|
+
}
|
|
99
|
+
), oe = s.div`
|
|
105
100
|
display: flex;
|
|
106
101
|
flex-direction: column;
|
|
107
102
|
align-items: left;
|
|
@@ -181,16 +176,16 @@ const n = {
|
|
|
181
176
|
max-width: 100%;
|
|
182
177
|
resize: none;
|
|
183
178
|
overflow-y: auto;
|
|
184
|
-
`,
|
|
179
|
+
`, j = X((e, o) => {
|
|
185
180
|
const { type: l, id: i, onChange: r, isRequired: d, dataAttributes: m, disabled: c, className: h } = e;
|
|
186
181
|
if (l === "textarea") {
|
|
187
|
-
const { rows: N = 5, cols: E = 30, value:
|
|
182
|
+
const { rows: N = 5, cols: E = 30, value: A, ...S } = e;
|
|
188
183
|
return /* @__PURE__ */ t(
|
|
189
184
|
de,
|
|
190
185
|
{
|
|
191
186
|
id: i,
|
|
192
187
|
onChange: r,
|
|
193
|
-
value:
|
|
188
|
+
value: A,
|
|
194
189
|
rows: N,
|
|
195
190
|
cols: E,
|
|
196
191
|
...m,
|
|
@@ -217,7 +212,7 @@ const n = {
|
|
|
217
212
|
}
|
|
218
213
|
);
|
|
219
214
|
}
|
|
220
|
-
const
|
|
215
|
+
const $ = e, { value: p, pattern: u, placeholderText: k, ...C } = $;
|
|
221
216
|
return /* @__PURE__ */ t(
|
|
222
217
|
q,
|
|
223
218
|
{
|
|
@@ -225,7 +220,7 @@ const n = {
|
|
|
225
220
|
name: i,
|
|
226
221
|
placeholder: k,
|
|
227
222
|
onChange: r,
|
|
228
|
-
value:
|
|
223
|
+
value: p,
|
|
229
224
|
type: l,
|
|
230
225
|
required: d,
|
|
231
226
|
...m,
|
|
@@ -245,33 +240,33 @@ const n = {
|
|
|
245
240
|
$labelFlexDirection: m,
|
|
246
241
|
svg: c,
|
|
247
242
|
labelClass: h,
|
|
248
|
-
onChange:
|
|
249
|
-
isRequired:
|
|
243
|
+
onChange: $,
|
|
244
|
+
isRequired: p,
|
|
250
245
|
dataAttributes: u,
|
|
251
246
|
inputClass: k,
|
|
252
247
|
ref: C,
|
|
253
248
|
disabled: N,
|
|
254
249
|
isEditable: E,
|
|
255
|
-
editIcon:
|
|
250
|
+
editIcon: A,
|
|
256
251
|
onClickEdit: S,
|
|
257
252
|
deleteIcon: L,
|
|
258
253
|
onClickDelete: B,
|
|
259
|
-
idx:
|
|
254
|
+
idx: z,
|
|
260
255
|
children: R
|
|
261
256
|
} = e;
|
|
262
257
|
return /* @__PURE__ */ g(oe, { className: `${o} ${i.replace("#", "")}-label-input-container`, children: [
|
|
263
258
|
l !== "radio" && l !== "checkbox" && /* @__PURE__ */ t(P, { htmlFor: i, textLabel: r, additionalInfo: d, $labelFlexDirection: m, svg: c, className: h }),
|
|
264
259
|
l !== "radio" && l !== "checkbox" && l === "textarea" && (() => {
|
|
265
|
-
const { rows: w = 5, cols: F = 30, value:
|
|
260
|
+
const { rows: w = 5, cols: F = 30, value: D, ...a } = e;
|
|
266
261
|
return /* @__PURE__ */ t(
|
|
267
|
-
|
|
262
|
+
j,
|
|
268
263
|
{
|
|
269
264
|
id: i,
|
|
270
265
|
name: i,
|
|
271
266
|
type: "textarea",
|
|
272
|
-
isRequired:
|
|
273
|
-
onChange:
|
|
274
|
-
value:
|
|
267
|
+
isRequired: p,
|
|
268
|
+
onChange: $,
|
|
269
|
+
value: D,
|
|
275
270
|
rows: w,
|
|
276
271
|
cols: F,
|
|
277
272
|
dataAttributes: u,
|
|
@@ -282,22 +277,22 @@ const n = {
|
|
|
282
277
|
);
|
|
283
278
|
})(),
|
|
284
279
|
l !== "radio" && l !== "checkbox" && l !== "textarea" && (() => {
|
|
285
|
-
const w = e, { value: F, pattern:
|
|
280
|
+
const w = e, { value: F, pattern: D, placeholderText: a, ...y } = w;
|
|
286
281
|
return /* @__PURE__ */ t(
|
|
287
|
-
|
|
282
|
+
j,
|
|
288
283
|
{
|
|
289
284
|
id: i,
|
|
290
285
|
name: i,
|
|
291
286
|
placeholderText: a,
|
|
292
|
-
onChange:
|
|
287
|
+
onChange: $,
|
|
293
288
|
value: F,
|
|
294
289
|
type: l,
|
|
295
|
-
isRequired:
|
|
290
|
+
isRequired: p,
|
|
296
291
|
dataAttributes: u,
|
|
297
292
|
className: k,
|
|
298
293
|
ref: C,
|
|
299
294
|
disabled: N,
|
|
300
|
-
pattern:
|
|
295
|
+
pattern: D
|
|
301
296
|
}
|
|
302
297
|
);
|
|
303
298
|
})(),
|
|
@@ -305,15 +300,15 @@ const n = {
|
|
|
305
300
|
const { checked: w, ...F } = e;
|
|
306
301
|
return /* @__PURE__ */ g(V, { children: [
|
|
307
302
|
/* @__PURE__ */ t(
|
|
308
|
-
|
|
303
|
+
j,
|
|
309
304
|
{
|
|
310
305
|
ref: C,
|
|
311
306
|
type: "checkbox",
|
|
312
307
|
name: i,
|
|
313
308
|
id: i,
|
|
314
|
-
isRequired:
|
|
309
|
+
isRequired: p,
|
|
315
310
|
checked: w,
|
|
316
|
-
onChange:
|
|
311
|
+
onChange: $,
|
|
317
312
|
disabled: N,
|
|
318
313
|
className: k,
|
|
319
314
|
dataAttributes: u
|
|
@@ -323,8 +318,8 @@ const n = {
|
|
|
323
318
|
] });
|
|
324
319
|
})(),
|
|
325
320
|
E && /* @__PURE__ */ g(ie, { className: "input-edit-buttons", children: [
|
|
326
|
-
/* @__PURE__ */ t(
|
|
327
|
-
/* @__PURE__ */ t(
|
|
321
|
+
/* @__PURE__ */ t(x, { id: `editable-${i}-edit-btn`, svg: A, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: u }),
|
|
322
|
+
/* @__PURE__ */ t(x, { id: `editable-${i}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: u })
|
|
328
323
|
] }),
|
|
329
324
|
R
|
|
330
325
|
] });
|
|
@@ -359,7 +354,7 @@ const n = {
|
|
|
359
354
|
}) => /* @__PURE__ */ g(me, { className: "editable-selection-fieldset", children: [
|
|
360
355
|
/* @__PURE__ */ t(be, { children: `${e} ${o + 1}` }),
|
|
361
356
|
l.map((c, h) => /* @__PURE__ */ t(he, { className: "editable-selection-container", children: /* @__PURE__ */ t(
|
|
362
|
-
|
|
357
|
+
j,
|
|
363
358
|
{
|
|
364
359
|
id: `editable-selection-${h}`,
|
|
365
360
|
name: `editable-selection-${h}`,
|
|
@@ -377,9 +372,9 @@ const n = {
|
|
|
377
372
|
}
|
|
378
373
|
) }, `${c.name}-${h}`)),
|
|
379
374
|
/* @__PURE__ */ g(fe, { className: "editable-selection-button-space", children: [
|
|
380
|
-
/* @__PURE__ */ t(
|
|
381
|
-
/* @__PURE__ */ t(
|
|
382
|
-
/* @__PURE__ */ t(
|
|
375
|
+
/* @__PURE__ */ t(x, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
|
|
376
|
+
/* @__PURE__ */ t(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
|
|
377
|
+
/* @__PURE__ */ t(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: m, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
|
|
383
378
|
] })
|
|
384
379
|
] }), ge = s.div`
|
|
385
380
|
display: flex;
|
|
@@ -395,15 +390,15 @@ const n = {
|
|
|
395
390
|
handleEdit: m,
|
|
396
391
|
hasCancel: c,
|
|
397
392
|
cancelText: h,
|
|
398
|
-
handleCancel:
|
|
399
|
-
hasDelete:
|
|
393
|
+
handleCancel: $,
|
|
394
|
+
hasDelete: p,
|
|
400
395
|
deleteText: u,
|
|
401
396
|
handleDelete: k
|
|
402
397
|
}) => /* @__PURE__ */ g(ge, { className: "form-main-button-container", children: [
|
|
403
|
-
o && /* @__PURE__ */ t(
|
|
404
|
-
r && /* @__PURE__ */ t(
|
|
405
|
-
c && /* @__PURE__ */ t(
|
|
406
|
-
|
|
398
|
+
o && /* @__PURE__ */ t(x, { id: `form-${e}-submit`, buttonType: "submit", text: l ?? "Submit", onClick: i, className: "submit-form-btn" }),
|
|
399
|
+
r && /* @__PURE__ */ t(x, { id: `form-${e}-edit`, buttonType: "button", text: d ?? "Edit", onClick: m, className: "edit-form-btn" }),
|
|
400
|
+
c && /* @__PURE__ */ t(x, { id: `form-${e}-cancel`, buttonType: "button", text: h ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
|
|
401
|
+
p && /* @__PURE__ */ t(x, { id: `form-${e}-delete`, buttonType: "button", text: u ?? "Delete", onClick: k, className: "delete-form-btn" })
|
|
407
402
|
] }), U = s.legend`
|
|
408
403
|
font-size: ${n.spacing.medium};
|
|
409
404
|
font-weight: 500;
|
|
@@ -458,26 +453,26 @@ const n = {
|
|
|
458
453
|
inputClass: c,
|
|
459
454
|
handleEditableInputEntryChange: h,
|
|
460
455
|
//* handles change on editable inputs
|
|
461
|
-
handleAddingInputEntry:
|
|
462
|
-
hasSubmit:
|
|
456
|
+
handleAddingInputEntry: $,
|
|
457
|
+
hasSubmit: p = !1,
|
|
463
458
|
hasCancel: u = !1,
|
|
464
459
|
hasDelete: k = !1,
|
|
465
460
|
hasEdit: C = !1,
|
|
466
461
|
submitText: N,
|
|
467
462
|
handleSubmitForm: E,
|
|
468
|
-
handleSubmit:
|
|
463
|
+
handleSubmit: A,
|
|
469
464
|
cancelText: S,
|
|
470
465
|
handleCancel: L,
|
|
471
466
|
deleteText: B,
|
|
472
|
-
handleDelete:
|
|
467
|
+
handleDelete: z,
|
|
473
468
|
editText: R,
|
|
474
469
|
handleEdit: w,
|
|
475
470
|
className: F,
|
|
476
|
-
children:
|
|
471
|
+
children: D
|
|
477
472
|
//* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
|
|
478
473
|
}) => /* @__PURE__ */ g(xe, { id: `${i}-form`, className: F, onSubmit: E, children: [
|
|
479
|
-
e ? e.map((a,
|
|
480
|
-
/* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${
|
|
474
|
+
e ? e.map((a, y) => /* @__PURE__ */ g(G, { children: [
|
|
475
|
+
/* @__PURE__ */ g(H, { id: `${i}-form-fieldset-${y}`, className: "form-fieldset", children: [
|
|
481
476
|
a.legend && /* @__PURE__ */ t(U, { children: a.legend }),
|
|
482
477
|
a.inputs.length !== 0 ? a.inputs.map((f, v) => /* @__PURE__ */ g(W.Fragment, { children: [
|
|
483
478
|
f.type === "textarea" && /* @__PURE__ */ t(
|
|
@@ -527,11 +522,11 @@ const n = {
|
|
|
527
522
|
)
|
|
528
523
|
] }, `form-${i}-${v}`)) : a.isExpandable ? /* @__PURE__ */ t(J, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
|
|
529
524
|
] }),
|
|
530
|
-
a.isExpandable && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(
|
|
531
|
-
] }, `${a.legend}-${
|
|
525
|
+
a.isExpandable && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
|
|
526
|
+
] }, `${a.legend}-${y}`)) : /* @__PURE__ */ g(G, { children: [
|
|
532
527
|
/* @__PURE__ */ g(H, { id: `${i}-form-fieldset`, className: "form-fieldset", children: [
|
|
533
528
|
o && /* @__PURE__ */ t(U, { children: o }),
|
|
534
|
-
!e && r && r.length !== 0 ? r.map((a,
|
|
529
|
+
!e && r && r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ g(W.Fragment, { children: [
|
|
535
530
|
a.type === "textarea" && /* @__PURE__ */ t(
|
|
536
531
|
T,
|
|
537
532
|
{
|
|
@@ -539,7 +534,7 @@ const n = {
|
|
|
539
534
|
id: a.id ?? `${o}-input`,
|
|
540
535
|
labelClass: m,
|
|
541
536
|
inputClass: c,
|
|
542
|
-
idx:
|
|
537
|
+
idx: y,
|
|
543
538
|
className: d
|
|
544
539
|
}
|
|
545
540
|
),
|
|
@@ -550,7 +545,7 @@ const n = {
|
|
|
550
545
|
id: a.id ?? `${o}-input`,
|
|
551
546
|
labelClass: m,
|
|
552
547
|
inputClass: c,
|
|
553
|
-
idx:
|
|
548
|
+
idx: y,
|
|
554
549
|
className: d
|
|
555
550
|
}
|
|
556
551
|
),
|
|
@@ -561,15 +556,15 @@ const n = {
|
|
|
561
556
|
id: a.id ?? `${o}-input`,
|
|
562
557
|
labelClass: m,
|
|
563
558
|
inputClass: c,
|
|
564
|
-
idx:
|
|
559
|
+
idx: y,
|
|
565
560
|
className: d
|
|
566
561
|
}
|
|
567
562
|
),
|
|
568
563
|
a.isEditable && a.editing && /* @__PURE__ */ t(
|
|
569
564
|
M,
|
|
570
565
|
{
|
|
571
|
-
legend: `${o} ${
|
|
572
|
-
idx:
|
|
566
|
+
legend: `${o} ${y + 1}`,
|
|
567
|
+
idx: y,
|
|
573
568
|
editableInformation: a?.editableInformation,
|
|
574
569
|
onChangeOfEditableOption: h,
|
|
575
570
|
onClickSaveEdit: a?.onClickSave,
|
|
@@ -577,17 +572,17 @@ const n = {
|
|
|
577
572
|
onClickDeleteEntry: a?.onClickDelete
|
|
578
573
|
}
|
|
579
574
|
)
|
|
580
|
-
] }, `form-${i}-${
|
|
575
|
+
] }, `form-${i}-${y}`)) : l ? /* @__PURE__ */ t(J, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
|
|
581
576
|
] }),
|
|
582
|
-
l && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(
|
|
577
|
+
l && /* @__PURE__ */ t(K, { className: "add-input-button-space", children: /* @__PURE__ */ t(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
|
|
583
578
|
] }),
|
|
584
579
|
/* @__PURE__ */ t(
|
|
585
580
|
ue,
|
|
586
581
|
{
|
|
587
582
|
id: i,
|
|
588
|
-
hasSubmit:
|
|
583
|
+
hasSubmit: p,
|
|
589
584
|
submitText: N,
|
|
590
|
-
handleSubmit:
|
|
585
|
+
handleSubmit: A,
|
|
591
586
|
hasEdit: C,
|
|
592
587
|
editText: R,
|
|
593
588
|
handleEdit: w,
|
|
@@ -596,10 +591,10 @@ const n = {
|
|
|
596
591
|
handleCancel: L,
|
|
597
592
|
hasDelete: k,
|
|
598
593
|
deleteText: B,
|
|
599
|
-
handleDelete:
|
|
594
|
+
handleDelete: z
|
|
600
595
|
}
|
|
601
596
|
),
|
|
602
|
-
/* @__PURE__ */ t($e, { className: "children-container", children:
|
|
597
|
+
/* @__PURE__ */ t($e, { className: "children-container", children: D })
|
|
603
598
|
] }), ye = (e) => {
|
|
604
599
|
const o = /^#([0-9A-Fa-f]{3}){1,2}$/, l = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
|
|
605
600
|
return o.test(e) || l.test(e) || CSS.supports("color", e);
|