@kbgarcia8/react-dynamic-form 1.1.35 → 1.1.37
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/components/atoms/Button/Button.d.ts +1 -1
- package/dist/components/atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map +1 -1
- package/dist/react-dynamic-form.cjs.js +50 -50
- package/dist/react-dynamic-form.es.js +173 -164
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ButtonProps } from "../../../type/propTypes";
|
|
2
|
-
declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Button: ({ onClick, id, buttonType, source, svg, alt, text, className, dataAttributes, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Button;
|
|
4
4
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -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,
|
|
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,yFAWb,WAAW,4CAgBb,CAAC;AAGF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,mTAuBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,mTAuBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CA2J1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("react"),c=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("react"),c=require("styled-components"),a={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;
|
|
5
|
-
background-color: ${({theme:
|
|
6
|
-
color: ${({theme:
|
|
7
|
-
border: ${
|
|
8
|
-
border-radius: ${
|
|
9
|
-
padding: ${
|
|
5
|
+
background-color: ${({theme:t})=>t.colors.blue||"blue"};
|
|
6
|
+
color: ${({theme:t})=>t.colors.bg||"white"};
|
|
7
|
+
border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text||"black"};
|
|
8
|
+
border-radius: ${a.borderRadius.xlarge};
|
|
9
|
+
padding: ${a.spacing.xxxsmall} ${a.spacing.small};
|
|
10
10
|
margin: 0.125rem;
|
|
11
11
|
width: auto;
|
|
12
12
|
cursor: pointer;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
&:hover {
|
|
16
16
|
background-color: lightblue;
|
|
17
|
-
border: ${
|
|
17
|
+
border: ${a.borderThickness.light} solid gray;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
& .button-icon-text-space {
|
|
@@ -33,21 +33,21 @@
|
|
|
33
33
|
`,V=c.img`
|
|
34
34
|
maxwidth: 100%;
|
|
35
35
|
`,X=c.span`
|
|
36
|
-
font-size: ${
|
|
37
|
-
font-weight: ${
|
|
38
|
-
font-family: ${
|
|
36
|
+
font-size: ${a.fontSize.xsmall};
|
|
37
|
+
font-weight: ${a.fontWeight.medium};
|
|
38
|
+
font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
42
|
-
|
|
42
|
+
`,f=({onClick:t,id:s,buttonType:o,source:i,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={},...g})=>e.jsx(K,{id:s,type:o,onClick:t,className:b,...g,...h,children:e.jsxs(Q,{className:"button-icon-text-space",children:[i?e.jsx(V,{src:i,alt:r}):m||"",d&&e.jsx(X,{id:s,children:d})]})}),Y=c.div`
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: left;
|
|
46
46
|
width: 100%;
|
|
47
|
-
margin-bottom: ${
|
|
47
|
+
margin-bottom: ${a.spacing.small};
|
|
48
48
|
`,Z=c.div`
|
|
49
49
|
display: flex;
|
|
50
|
-
gap: ${
|
|
50
|
+
gap: ${a.spacing.xsmall};
|
|
51
51
|
width: auto;
|
|
52
52
|
height: auto;
|
|
53
53
|
`,_=c.label`
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
align-items: center;
|
|
56
56
|
justify-content:center;
|
|
57
57
|
height: auto;
|
|
58
|
-
flex-direction: ${
|
|
59
|
-
font-family: ${
|
|
60
|
-
font-size: ${
|
|
61
|
-
font-weight: ${
|
|
62
|
-
gap: ${
|
|
58
|
+
flex-direction: ${t=>t.$labelFlexDirection||"column"};
|
|
59
|
+
font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
|
|
60
|
+
font-size: ${a.fontSize.xsmall};
|
|
61
|
+
font-weight: ${a.fontWeight.bold};
|
|
62
|
+
gap: ${a.spacing.xxsmall};
|
|
63
63
|
|
|
64
64
|
& .label-icon-container img,
|
|
65
65
|
& .label-icon-container svg {
|
|
@@ -72,82 +72,82 @@
|
|
|
72
72
|
flex-direction: column;
|
|
73
73
|
align-items: center;
|
|
74
74
|
justify-content: center;
|
|
75
|
-
gap: ${
|
|
75
|
+
gap: ${a.spacing.xxxsmall};
|
|
76
76
|
`,ee=c.span`
|
|
77
|
-
font-weight: ${
|
|
77
|
+
font-weight: ${a.fontWeight.bolder};
|
|
78
78
|
`,te=c.div`
|
|
79
79
|
max-width: 100%;
|
|
80
80
|
display: flex;
|
|
81
81
|
align-items: center;
|
|
82
82
|
`,ae=c.span`
|
|
83
|
-
font-weight: ${
|
|
84
|
-
`,
|
|
83
|
+
font-weight: ${a.fontWeight.light};
|
|
84
|
+
`,L=({htmlFor:t,textLabel:s,additionalInfo:o,$labelFlexDirection:i,source:m,svg:r,className:d,children:b})=>e.jsxs(_,{htmlFor:t,className:d,$labelFlexDirection:i,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${t}-label-icon`}):r||""}),e.jsxs(I,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:s}),o&&e.jsx(ae,{className:"additional-info",children:o})]}),b]}),B=c.input`
|
|
85
85
|
display: flex;
|
|
86
86
|
place-content: center;
|
|
87
|
-
font-family: ${
|
|
88
|
-
font-size: ${
|
|
87
|
+
font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
|
|
88
|
+
font-size: ${a.fontSize.xsmall};
|
|
89
89
|
line-height: 1.75;
|
|
90
|
-
padding: ${
|
|
90
|
+
padding: ${a.spacing.xxxsmall} ${a.spacing.xsmall};
|
|
91
91
|
max-width: 100%;
|
|
92
92
|
height: auto;
|
|
93
93
|
background-color: #FFFFFF;
|
|
94
94
|
outline: none;
|
|
95
|
-
border: ${
|
|
96
|
-
border-radius: ${
|
|
95
|
+
border: ${a.borderThickness.thin} solid #000000;
|
|
96
|
+
border-radius: ${a.borderRadius.xsmall};
|
|
97
97
|
|
|
98
98
|
&:focus{
|
|
99
|
-
border: ${
|
|
99
|
+
border: ${a.borderThickness.thin} solid ${({theme:t})=>t.colors.teal};
|
|
100
100
|
}
|
|
101
101
|
`,ne=c.textarea`
|
|
102
102
|
display: flex;
|
|
103
103
|
place-content: center;
|
|
104
|
-
border: ${
|
|
105
|
-
border-radius: ${
|
|
104
|
+
border: ${a.borderThickness.light} solid ${({theme:t})=>t.colors.text};
|
|
105
|
+
border-radius: ${a.borderRadius.small};
|
|
106
106
|
outline: none;
|
|
107
|
-
line-height: ${
|
|
108
|
-
padding: ${
|
|
109
|
-
font-family: ${
|
|
110
|
-
font-size: ${
|
|
107
|
+
line-height: ${a.spacing.small};
|
|
108
|
+
padding: ${a.spacing.xxxsmall};
|
|
109
|
+
font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
|
|
110
|
+
font-size: ${a.fontSize.xsmall};
|
|
111
111
|
max-width: 100%;
|
|
112
112
|
resize: none;
|
|
113
113
|
overflow-y: auto;
|
|
114
|
-
`,A=F.forwardRef((
|
|
114
|
+
`,A=F.forwardRef((t,s)=>{const{type:o,id:i,onChange:m,isRequired:r,dataAttributes:d={},disabled:b,className:h}=t;if(o==="textarea"){const{rows:p=5,cols:N=30,value:E,...v}=t;return e.jsx(ne,{onChange:m,value:E,rows:p,cols:N,className:h,ref:s,disabled:b,required:r,...v,...d})}if(o==="radio"||o==="checkbox"){const{checked:p,...N}=t;return e.jsx(B,{ref:s,checked:p,onChange:m,disabled:b,className:h,...N,...d})}const g=t,{value:j,pattern:y,placeholderText:k,...C}=g;return e.jsx(B,{placeholder:k,onChange:m,value:j,required:r,className:h,ref:s,disabled:b,pattern:y,...C,...d})}),w=t=>{const{className:s,type:o,id:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:g,isRequired:j,dataAttributes:y,inputClass:k,ref:C,disabled:p,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=t;return e.jsxs(Y,{className:`${s} ${i.replace("#","")}-label-input-container`,children:[o!=="radio"&&o!=="checkbox"&&e.jsx(L,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),o!=="radio"&&o!=="checkbox"&&o==="textarea"&&(()=>{const{rows:n=5,cols:u=30,value:l,...$}=t;return e.jsx(A,{id:i,name:i,type:"textarea",isRequired:j,onChange:g,value:l,rows:n,cols:u,dataAttributes:y,className:k,ref:C,disabled:p})})(),o!=="radio"&&o!=="checkbox"&&o!=="textarea"&&(()=>{const n=t,{value:u,pattern:l,placeholderText:$,...z}=n;return e.jsx(A,{id:i,name:i,placeholderText:$,onChange:g,value:u,type:o,isRequired:j,dataAttributes:y,className:k,ref:C,disabled:p,pattern:l})})(),(o==="radio"||o==="checkbox")&&(()=>{const{checked:n,...u}=t;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:o,name:i,id:i,isRequired:j,checked:n,onChange:g,disabled:p,className:k,dataAttributes:y}),e.jsx(L,{htmlFor:i,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${i}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:y}),e.jsx(f,{id:`editable-${i}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:y})]}),q]})},oe=c.fieldset`
|
|
115
115
|
padding: 0;
|
|
116
116
|
height: auto;
|
|
117
117
|
width: 100%;
|
|
118
|
-
`,
|
|
119
|
-
font-size: ${
|
|
118
|
+
`,se=c.legend`
|
|
119
|
+
font-size: ${a.spacing.medium};
|
|
120
120
|
font-weight: 500;
|
|
121
|
-
margin: 0 auto ${
|
|
121
|
+
margin: 0 auto ${a.spacing.small} auto;
|
|
122
122
|
text-align: center;
|
|
123
|
-
font-family: ${
|
|
123
|
+
font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
|
|
124
124
|
`,ie=c.div`
|
|
125
125
|
display: flex;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
align-items: flex-start;
|
|
128
128
|
width: 100%;
|
|
129
|
-
margin-bottom: ${
|
|
129
|
+
margin-bottom: ${a.spacing.small};
|
|
130
130
|
`,le=c.div`
|
|
131
131
|
display: flex;
|
|
132
132
|
justify-content: space-between;
|
|
133
133
|
width: 100%;
|
|
134
|
-
`,P=({legend:
|
|
134
|
+
`,P=({legend:t,fieldsetIndex:s,idx:o,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(s),e.jsxs(oe,{className:"editable-option-fieldset",children:[e.jsxs(se,{children:[`${t} ${o+1}`,`fieldsetIndex: ${s}`]}),i?.map((h,g)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${g}`,name:`editable-option-${g}`,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":g,"data-fieldsetindex":s,"data-key":h.info}})},`${h.name}-${g}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${o}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}})]})]})),ce=c.div`
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: space-between;
|
|
137
137
|
max-width: 100%;
|
|
138
|
-
`,re=({id:
|
|
139
|
-
font-size: ${
|
|
138
|
+
`,re=({id:t,hasSubmit:s,submitText:o,handleSubmit:i,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:g})=>e.jsxs(ce,{className:"form-main-button-container",children:[s&&e.jsx(f,{id:`form-${t}-submit`,buttonType:"submit",text:o??"Submit",onClick:i,className:"submit-form-btn"}),m&&e.jsx(f,{id:`form-${t}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx(f,{id:`form-${t}-cancel`,buttonType:"button",text:h??"Cancel",onClick:g,className:"cancel-form-btn"})]}),W=c.legend`
|
|
139
|
+
font-size: ${a.spacing.medium};
|
|
140
140
|
font-weight: 500;
|
|
141
|
-
margin-bottom: ${
|
|
141
|
+
margin-bottom: ${a.spacing.small};
|
|
142
142
|
width: auto;
|
|
143
143
|
text-align: center;
|
|
144
|
-
font-family: ${
|
|
144
|
+
font-family: ${a.fonts.secondary}, ${a.fonts.fallback};
|
|
145
145
|
`,M=c.fieldset`
|
|
146
146
|
padding: 0;
|
|
147
147
|
height: auto;
|
|
148
148
|
width: 100%;
|
|
149
149
|
`,U=c.div`
|
|
150
|
-
padding: ${
|
|
150
|
+
padding: ${a.spacing.small};
|
|
151
151
|
height: auto;
|
|
152
152
|
width: 100%;
|
|
153
153
|
`,O=c.div`
|
|
@@ -156,9 +156,9 @@
|
|
|
156
156
|
align-items: center;
|
|
157
157
|
width: 100%;
|
|
158
158
|
height: auto;
|
|
159
|
-
font-family: ${
|
|
160
|
-
font-size: ${
|
|
161
|
-
font-weight: ${
|
|
159
|
+
font-family: ${a.fonts.tertiary}, ${a.fonts.fallback};
|
|
160
|
+
font-size: ${a.fontSize.xsmall};
|
|
161
|
+
font-weight: ${a.fontWeight.bold};
|
|
162
162
|
`,de=c.form`
|
|
163
163
|
display: flex;
|
|
164
164
|
flex-direction: column;
|
|
@@ -174,4 +174,4 @@
|
|
|
174
174
|
flex-direction: column;
|
|
175
175
|
align-items: center;
|
|
176
176
|
justify-content: center;
|
|
177
|
-
`,xe=({fieldsets:
|
|
177
|
+
`,xe=({fieldsets:t=null,legendText:s,isExpandable:o,id:i,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:g,hasSubmit:j=!1,submitText:y,handleSubmit:k,hasReset:C=!1,resetText:p,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>(console.log("Rendering DynamicForm",t),t?.forEach((n,u)=>{console.log("Fieldset index",u,"legend:",n.legend),n.inputs.forEach((l,$)=>{console.log("Input",$,"type:",l.type,"editing:",l.editing)})}),e.jsxs(de,{id:`${i}-form`,className:T,onSubmit:S,children:[t?t.map((n,u)=>e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset-${u}`,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,$)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:$,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:u,idx:$,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${i}-${$}`)):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:g,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":u}})})]},`${n.legend}-${u}`)):e.jsxs(U,{className:`${i}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${i}-form-fieldset`,className:`${s}-fieldset`,children:[s&&e.jsx(W,{className:`${s}-legend`,children:s}),!t&&m&&m.length!==0?m.map((n,u)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${s}-input`,labelClass:d,inputClass:b,idx:u,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${s}`,idx:u,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${i}-${u}`)):o?e.jsx(O,{children:`No entry yet on ${s}. Please click "+" button to add`}):""]}),o&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${s}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(re,{id:i,hasSubmit:j,submitText:y,handleSubmit:k,hasReset:C,resetText:p,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]})),be=t=>{const s=/^#([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*\)$/;return s.test(t)||o.test(t)||CSS.supports("color",t)},x=t=>{if(!be(t))throw new Error(`Invalid color: ${t}`);return t},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")}},R=F.createContext({}),ge=({children:t,initialTheme:s=G,secondTheme:o=J})=>{const[i,m]=F.useState(s),r=()=>{m(d=>d===s?o:s)};return e.jsx(R.Provider,{value:{currentTheme:i,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:i,children:t})})},ue=()=>F.useContext(R);exports.DynamicForm=xe;exports.ThemeContext=R;exports.ThemeContextProvider=ge;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ue;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as n, jsxs as u, Fragment as R } from "react/jsx-runtime";
|
|
2
2
|
import q, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
|
|
3
3
|
import c, { ThemeProvider as Y } from "styled-components";
|
|
4
|
-
const
|
|
4
|
+
const t = {
|
|
5
5
|
fonts: {
|
|
6
6
|
secondary: "Raleway",
|
|
7
7
|
tertiary: "Lato",
|
|
@@ -36,11 +36,11 @@ const e = {
|
|
|
36
36
|
display: flex;
|
|
37
37
|
align-items: center;
|
|
38
38
|
justify-content: center;
|
|
39
|
-
background-color: ${({ theme:
|
|
40
|
-
color: ${({ theme:
|
|
41
|
-
border: ${
|
|
42
|
-
border-radius: ${
|
|
43
|
-
padding: ${
|
|
39
|
+
background-color: ${({ theme: e }) => e.colors.blue || "blue"};
|
|
40
|
+
color: ${({ theme: e }) => e.colors.bg || "white"};
|
|
41
|
+
border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text || "black"};
|
|
42
|
+
border-radius: ${t.borderRadius.xlarge};
|
|
43
|
+
padding: ${t.spacing.xxxsmall} ${t.spacing.small};
|
|
44
44
|
margin: 0.125rem;
|
|
45
45
|
width: auto;
|
|
46
46
|
cursor: pointer;
|
|
@@ -48,7 +48,7 @@ const e = {
|
|
|
48
48
|
|
|
49
49
|
&:hover {
|
|
50
50
|
background-color: lightblue;
|
|
51
|
-
border: ${
|
|
51
|
+
border: ${t.borderThickness.light} solid gray;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
& .button-icon-text-space {
|
|
@@ -67,14 +67,14 @@ const e = {
|
|
|
67
67
|
`, I = c.img`
|
|
68
68
|
maxwidth: 100%;
|
|
69
69
|
`, ee = c.span`
|
|
70
|
-
font-size: ${
|
|
71
|
-
font-weight: ${
|
|
72
|
-
font-family: ${
|
|
70
|
+
font-size: ${t.fontSize.xsmall};
|
|
71
|
+
font-weight: ${t.fontWeight.medium};
|
|
72
|
+
font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
|
|
73
73
|
display: flex;
|
|
74
74
|
align-items: center;
|
|
75
75
|
justify-content: center;
|
|
76
|
-
`,
|
|
77
|
-
onClick:
|
|
76
|
+
`, p = ({
|
|
77
|
+
onClick: e,
|
|
78
78
|
id: l,
|
|
79
79
|
buttonType: o,
|
|
80
80
|
source: i,
|
|
@@ -82,18 +82,20 @@ const e = {
|
|
|
82
82
|
alt: r = "alt-button-icon",
|
|
83
83
|
text: d = "",
|
|
84
84
|
className: h = "",
|
|
85
|
-
dataAttributes: g = {}
|
|
86
|
-
|
|
85
|
+
dataAttributes: g = {},
|
|
86
|
+
...$
|
|
87
|
+
}) => /* @__PURE__ */ n(
|
|
87
88
|
Z,
|
|
88
89
|
{
|
|
89
|
-
onClick: t,
|
|
90
90
|
id: l,
|
|
91
91
|
type: o,
|
|
92
|
+
onClick: e,
|
|
92
93
|
className: h,
|
|
94
|
+
...$,
|
|
93
95
|
...g,
|
|
94
96
|
children: /* @__PURE__ */ u(_, { className: "button-icon-text-space", children: [
|
|
95
|
-
i ? /* @__PURE__ */
|
|
96
|
-
d && /* @__PURE__ */
|
|
97
|
+
i ? /* @__PURE__ */ n(I, { src: i, alt: r }) : m || "",
|
|
98
|
+
d && /* @__PURE__ */ n(ee, { id: l, children: d })
|
|
97
99
|
] })
|
|
98
100
|
}
|
|
99
101
|
), te = c.div`
|
|
@@ -101,10 +103,10 @@ const e = {
|
|
|
101
103
|
flex-direction: column;
|
|
102
104
|
align-items: left;
|
|
103
105
|
width: 100%;
|
|
104
|
-
margin-bottom: ${
|
|
106
|
+
margin-bottom: ${t.spacing.small};
|
|
105
107
|
`, ae = c.div`
|
|
106
108
|
display: flex;
|
|
107
|
-
gap: ${
|
|
109
|
+
gap: ${t.spacing.xsmall};
|
|
108
110
|
width: auto;
|
|
109
111
|
height: auto;
|
|
110
112
|
`, ne = c.label`
|
|
@@ -112,11 +114,11 @@ const e = {
|
|
|
112
114
|
align-items: center;
|
|
113
115
|
justify-content:center;
|
|
114
116
|
height: auto;
|
|
115
|
-
flex-direction: ${(
|
|
116
|
-
font-family: ${
|
|
117
|
-
font-size: ${
|
|
118
|
-
font-weight: ${
|
|
119
|
-
gap: ${
|
|
117
|
+
flex-direction: ${(e) => e.$labelFlexDirection || "column"};
|
|
118
|
+
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
119
|
+
font-size: ${t.fontSize.xsmall};
|
|
120
|
+
font-weight: ${t.fontWeight.bold};
|
|
121
|
+
gap: ${t.spacing.xxsmall};
|
|
120
122
|
|
|
121
123
|
& .label-icon-container img,
|
|
122
124
|
& .label-icon-container svg {
|
|
@@ -129,17 +131,17 @@ const e = {
|
|
|
129
131
|
flex-direction: column;
|
|
130
132
|
align-items: center;
|
|
131
133
|
justify-content: center;
|
|
132
|
-
gap: ${
|
|
134
|
+
gap: ${t.spacing.xxxsmall};
|
|
133
135
|
`, le = c.span`
|
|
134
|
-
font-weight: ${
|
|
136
|
+
font-weight: ${t.fontWeight.bolder};
|
|
135
137
|
`, ie = c.div`
|
|
136
138
|
max-width: 100%;
|
|
137
139
|
display: flex;
|
|
138
140
|
align-items: center;
|
|
139
141
|
`, se = c.span`
|
|
140
|
-
font-weight: ${
|
|
142
|
+
font-weight: ${t.fontWeight.light};
|
|
141
143
|
`, B = ({
|
|
142
|
-
htmlFor:
|
|
144
|
+
htmlFor: e,
|
|
143
145
|
textLabel: l,
|
|
144
146
|
additionalInfo: o,
|
|
145
147
|
$labelFlexDirection: i,
|
|
@@ -147,53 +149,53 @@ const e = {
|
|
|
147
149
|
svg: r,
|
|
148
150
|
className: d,
|
|
149
151
|
children: h
|
|
150
|
-
}) => /* @__PURE__ */ u(ne, { htmlFor:
|
|
151
|
-
(m || r) && /* @__PURE__ */
|
|
152
|
+
}) => /* @__PURE__ */ u(ne, { htmlFor: e, className: d, $labelFlexDirection: i, children: [
|
|
153
|
+
(m || r) && /* @__PURE__ */ n(ie, { className: "label-icon-container", children: m ? /* @__PURE__ */ n("img", { src: m, alt: `${e}-label-icon` }) : r || "" }),
|
|
152
154
|
/* @__PURE__ */ u(oe, { className: "label-text-container", children: [
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
-
o && /* @__PURE__ */
|
|
155
|
+
/* @__PURE__ */ n(le, { className: "main-label", children: l }),
|
|
156
|
+
o && /* @__PURE__ */ n(se, { className: "additional-info", children: o })
|
|
155
157
|
] }),
|
|
156
158
|
h
|
|
157
159
|
] }), W = c.input`
|
|
158
160
|
display: flex;
|
|
159
161
|
place-content: center;
|
|
160
|
-
font-family: ${
|
|
161
|
-
font-size: ${
|
|
162
|
+
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
163
|
+
font-size: ${t.fontSize.xsmall};
|
|
162
164
|
line-height: 1.75;
|
|
163
|
-
padding: ${
|
|
165
|
+
padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
|
|
164
166
|
max-width: 100%;
|
|
165
167
|
height: auto;
|
|
166
168
|
background-color: #FFFFFF;
|
|
167
169
|
outline: none;
|
|
168
|
-
border: ${
|
|
169
|
-
border-radius: ${
|
|
170
|
+
border: ${t.borderThickness.thin} solid #000000;
|
|
171
|
+
border-radius: ${t.borderRadius.xsmall};
|
|
170
172
|
|
|
171
173
|
&:focus{
|
|
172
|
-
border: ${
|
|
174
|
+
border: ${t.borderThickness.thin} solid ${({ theme: e }) => e.colors.teal};
|
|
173
175
|
}
|
|
174
176
|
`, ce = c.textarea`
|
|
175
177
|
display: flex;
|
|
176
178
|
place-content: center;
|
|
177
|
-
border: ${
|
|
178
|
-
border-radius: ${
|
|
179
|
+
border: ${t.borderThickness.light} solid ${({ theme: e }) => e.colors.text};
|
|
180
|
+
border-radius: ${t.borderRadius.small};
|
|
179
181
|
outline: none;
|
|
180
|
-
line-height: ${
|
|
181
|
-
padding: ${
|
|
182
|
-
font-family: ${
|
|
183
|
-
font-size: ${
|
|
182
|
+
line-height: ${t.spacing.small};
|
|
183
|
+
padding: ${t.spacing.xxxsmall};
|
|
184
|
+
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
185
|
+
font-size: ${t.fontSize.xsmall};
|
|
184
186
|
max-width: 100%;
|
|
185
187
|
resize: none;
|
|
186
188
|
overflow-y: auto;
|
|
187
|
-
`,
|
|
188
|
-
const { type: o, id: i, onChange: m, isRequired: r, dataAttributes: d, disabled: h, className: g } =
|
|
189
|
+
`, T = K((e, l) => {
|
|
190
|
+
const { type: o, id: i, onChange: m, isRequired: r, dataAttributes: d = {}, disabled: h, className: g } = e;
|
|
189
191
|
if (o === "textarea") {
|
|
190
|
-
const { rows:
|
|
191
|
-
return /* @__PURE__ */
|
|
192
|
+
const { rows: k = 5, cols: F = 30, value: v, ...A } = e;
|
|
193
|
+
return /* @__PURE__ */ n(
|
|
192
194
|
ce,
|
|
193
195
|
{
|
|
194
196
|
onChange: m,
|
|
195
197
|
value: v,
|
|
196
|
-
rows:
|
|
198
|
+
rows: k,
|
|
197
199
|
cols: F,
|
|
198
200
|
className: g,
|
|
199
201
|
ref: l,
|
|
@@ -205,12 +207,12 @@ const e = {
|
|
|
205
207
|
);
|
|
206
208
|
}
|
|
207
209
|
if (o === "radio" || o === "checkbox") {
|
|
208
|
-
const { checked:
|
|
209
|
-
return /* @__PURE__ */
|
|
210
|
+
const { checked: k, ...F } = e;
|
|
211
|
+
return /* @__PURE__ */ n(
|
|
210
212
|
W,
|
|
211
213
|
{
|
|
212
214
|
ref: l,
|
|
213
|
-
checked:
|
|
215
|
+
checked: k,
|
|
214
216
|
onChange: m,
|
|
215
217
|
disabled: h,
|
|
216
218
|
className: g,
|
|
@@ -219,8 +221,8 @@ const e = {
|
|
|
219
221
|
}
|
|
220
222
|
);
|
|
221
223
|
}
|
|
222
|
-
const $ =
|
|
223
|
-
return /* @__PURE__ */
|
|
224
|
+
const $ = e, { value: N, pattern: y, placeholderText: C, ...w } = $;
|
|
225
|
+
return /* @__PURE__ */ n(
|
|
224
226
|
W,
|
|
225
227
|
{
|
|
226
228
|
placeholder: C,
|
|
@@ -230,12 +232,12 @@ const e = {
|
|
|
230
232
|
className: g,
|
|
231
233
|
ref: l,
|
|
232
234
|
disabled: h,
|
|
233
|
-
pattern:
|
|
235
|
+
pattern: y,
|
|
234
236
|
...w,
|
|
235
237
|
...d
|
|
236
238
|
}
|
|
237
239
|
);
|
|
238
|
-
}), E = (
|
|
240
|
+
}), E = (e) => {
|
|
239
241
|
const {
|
|
240
242
|
className: l,
|
|
241
243
|
type: o,
|
|
@@ -247,24 +249,24 @@ const e = {
|
|
|
247
249
|
labelClass: g,
|
|
248
250
|
onChange: $,
|
|
249
251
|
isRequired: N,
|
|
250
|
-
dataAttributes:
|
|
252
|
+
dataAttributes: y,
|
|
251
253
|
inputClass: C,
|
|
252
254
|
ref: w,
|
|
253
|
-
disabled:
|
|
255
|
+
disabled: k,
|
|
254
256
|
isEditable: F,
|
|
255
257
|
editIcon: v,
|
|
256
258
|
onClickEdit: A,
|
|
257
259
|
deleteIcon: S,
|
|
258
260
|
onClickDelete: z,
|
|
259
|
-
idx:
|
|
261
|
+
idx: D,
|
|
260
262
|
children: j
|
|
261
|
-
} =
|
|
263
|
+
} = e;
|
|
262
264
|
return /* @__PURE__ */ u(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
|
|
263
|
-
o !== "radio" && o !== "checkbox" && /* @__PURE__ */
|
|
265
|
+
o !== "radio" && o !== "checkbox" && /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g }),
|
|
264
266
|
o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
|
|
265
|
-
const { rows:
|
|
266
|
-
return /* @__PURE__ */
|
|
267
|
-
|
|
267
|
+
const { rows: a = 5, cols: f = 30, value: s, ...x } = e;
|
|
268
|
+
return /* @__PURE__ */ n(
|
|
269
|
+
T,
|
|
268
270
|
{
|
|
269
271
|
id: i,
|
|
270
272
|
name: i,
|
|
@@ -272,59 +274,59 @@ const e = {
|
|
|
272
274
|
isRequired: N,
|
|
273
275
|
onChange: $,
|
|
274
276
|
value: s,
|
|
275
|
-
rows:
|
|
277
|
+
rows: a,
|
|
276
278
|
cols: f,
|
|
277
|
-
dataAttributes:
|
|
279
|
+
dataAttributes: y,
|
|
278
280
|
className: C,
|
|
279
281
|
ref: w,
|
|
280
|
-
disabled:
|
|
282
|
+
disabled: k
|
|
281
283
|
}
|
|
282
284
|
);
|
|
283
285
|
})(),
|
|
284
286
|
o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
|
|
285
|
-
const
|
|
286
|
-
return /* @__PURE__ */
|
|
287
|
-
|
|
287
|
+
const a = e, { value: f, pattern: s, placeholderText: x, ...L } = a;
|
|
288
|
+
return /* @__PURE__ */ n(
|
|
289
|
+
T,
|
|
288
290
|
{
|
|
289
291
|
id: i,
|
|
290
292
|
name: i,
|
|
291
|
-
placeholderText:
|
|
293
|
+
placeholderText: x,
|
|
292
294
|
onChange: $,
|
|
293
295
|
value: f,
|
|
294
296
|
type: o,
|
|
295
297
|
isRequired: N,
|
|
296
|
-
dataAttributes:
|
|
298
|
+
dataAttributes: y,
|
|
297
299
|
className: C,
|
|
298
300
|
ref: w,
|
|
299
|
-
disabled:
|
|
301
|
+
disabled: k,
|
|
300
302
|
pattern: s
|
|
301
303
|
}
|
|
302
304
|
);
|
|
303
305
|
})(),
|
|
304
306
|
(o === "radio" || o === "checkbox") && (() => {
|
|
305
|
-
const { checked:
|
|
307
|
+
const { checked: a, ...f } = e;
|
|
306
308
|
return /* @__PURE__ */ u(R, { children: [
|
|
307
|
-
/* @__PURE__ */
|
|
308
|
-
|
|
309
|
+
/* @__PURE__ */ n(
|
|
310
|
+
T,
|
|
309
311
|
{
|
|
310
312
|
ref: w,
|
|
311
|
-
type:
|
|
313
|
+
type: o,
|
|
312
314
|
name: i,
|
|
313
315
|
id: i,
|
|
314
316
|
isRequired: N,
|
|
315
|
-
checked:
|
|
317
|
+
checked: a,
|
|
316
318
|
onChange: $,
|
|
317
|
-
disabled:
|
|
319
|
+
disabled: k,
|
|
318
320
|
className: C,
|
|
319
|
-
dataAttributes:
|
|
321
|
+
dataAttributes: y
|
|
320
322
|
}
|
|
321
323
|
),
|
|
322
|
-
/* @__PURE__ */
|
|
324
|
+
/* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g })
|
|
323
325
|
] });
|
|
324
326
|
})(),
|
|
325
327
|
F && /* @__PURE__ */ u(ae, { className: "input-edit-buttons", children: [
|
|
326
|
-
/* @__PURE__ */
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
+
/* @__PURE__ */ n(p, { id: `editable-${i}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${D}`, dataAttributes: y }),
|
|
329
|
+
/* @__PURE__ */ n(p, { id: `editable-${i}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${D}`, dataAttributes: y })
|
|
328
330
|
] }),
|
|
329
331
|
j
|
|
330
332
|
] });
|
|
@@ -333,23 +335,23 @@ const e = {
|
|
|
333
335
|
height: auto;
|
|
334
336
|
width: 100%;
|
|
335
337
|
`, de = c.legend`
|
|
336
|
-
font-size: ${
|
|
338
|
+
font-size: ${t.spacing.medium};
|
|
337
339
|
font-weight: 500;
|
|
338
|
-
margin: 0 auto ${
|
|
340
|
+
margin: 0 auto ${t.spacing.small} auto;
|
|
339
341
|
text-align: center;
|
|
340
|
-
font-family: ${
|
|
342
|
+
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
341
343
|
`, me = c.div`
|
|
342
344
|
display: flex;
|
|
343
345
|
flex-direction: column;
|
|
344
346
|
align-items: flex-start;
|
|
345
347
|
width: 100%;
|
|
346
|
-
margin-bottom: ${
|
|
348
|
+
margin-bottom: ${t.spacing.small};
|
|
347
349
|
`, be = c.div`
|
|
348
350
|
display: flex;
|
|
349
351
|
justify-content: space-between;
|
|
350
352
|
width: 100%;
|
|
351
353
|
`, P = ({
|
|
352
|
-
legend:
|
|
354
|
+
legend: e,
|
|
353
355
|
fieldsetIndex: l,
|
|
354
356
|
idx: o,
|
|
355
357
|
editableInformation: i,
|
|
@@ -358,9 +360,12 @@ const e = {
|
|
|
358
360
|
onClickCancelEdit: d,
|
|
359
361
|
onClickDeleteEntry: h
|
|
360
362
|
}) => (console.log(l), /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
|
|
361
|
-
/* @__PURE__ */
|
|
362
|
-
|
|
363
|
-
|
|
363
|
+
/* @__PURE__ */ u(de, { children: [
|
|
364
|
+
`${e} ${o + 1}`,
|
|
365
|
+
`fieldsetIndex: ${l}`
|
|
366
|
+
] }),
|
|
367
|
+
i?.map((g, $) => /* @__PURE__ */ n(me, { className: "editable-option-container", children: /* @__PURE__ */ n(
|
|
368
|
+
T,
|
|
364
369
|
{
|
|
365
370
|
id: `editable-option-${$}`,
|
|
366
371
|
name: `editable-option-${$}`,
|
|
@@ -378,16 +383,16 @@ const e = {
|
|
|
378
383
|
}
|
|
379
384
|
) }, `${g.name}-${$}`)),
|
|
380
385
|
/* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
|
|
381
|
-
/* @__PURE__ */
|
|
382
|
-
/* @__PURE__ */
|
|
383
|
-
/* @__PURE__ */
|
|
386
|
+
/* @__PURE__ */ n(p, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
|
|
387
|
+
/* @__PURE__ */ n(p, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
|
|
388
|
+
/* @__PURE__ */ n(p, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } })
|
|
384
389
|
] })
|
|
385
390
|
] })), he = c.div`
|
|
386
391
|
display: flex;
|
|
387
392
|
justify-content: space-between;
|
|
388
393
|
max-width: 100%;
|
|
389
394
|
`, ge = ({
|
|
390
|
-
id:
|
|
395
|
+
id: e,
|
|
391
396
|
hasSubmit: l,
|
|
392
397
|
submitText: o,
|
|
393
398
|
handleSubmit: i,
|
|
@@ -398,22 +403,22 @@ const e = {
|
|
|
398
403
|
cancelText: g,
|
|
399
404
|
handleCancel: $
|
|
400
405
|
}) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
|
|
401
|
-
l && /* @__PURE__ */
|
|
402
|
-
m && /* @__PURE__ */
|
|
403
|
-
h && /* @__PURE__ */
|
|
406
|
+
l && /* @__PURE__ */ n(p, { id: `form-${e}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
|
|
407
|
+
m && /* @__PURE__ */ n(p, { id: `form-${e}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
|
|
408
|
+
h && /* @__PURE__ */ n(p, { id: `form-${e}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: $, className: "cancel-form-btn" })
|
|
404
409
|
] }), M = c.legend`
|
|
405
|
-
font-size: ${
|
|
410
|
+
font-size: ${t.spacing.medium};
|
|
406
411
|
font-weight: 500;
|
|
407
|
-
margin-bottom: ${
|
|
412
|
+
margin-bottom: ${t.spacing.small};
|
|
408
413
|
width: auto;
|
|
409
414
|
text-align: center;
|
|
410
|
-
font-family: ${
|
|
415
|
+
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
411
416
|
`, U = c.fieldset`
|
|
412
417
|
padding: 0;
|
|
413
418
|
height: auto;
|
|
414
419
|
width: 100%;
|
|
415
420
|
`, H = c.div`
|
|
416
|
-
padding: ${
|
|
421
|
+
padding: ${t.spacing.small};
|
|
417
422
|
height: auto;
|
|
418
423
|
width: 100%;
|
|
419
424
|
`, O = c.div`
|
|
@@ -422,9 +427,9 @@ const e = {
|
|
|
422
427
|
align-items: center;
|
|
423
428
|
width: 100%;
|
|
424
429
|
height: auto;
|
|
425
|
-
font-family: ${
|
|
426
|
-
font-size: ${
|
|
427
|
-
font-weight: ${
|
|
430
|
+
font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
|
|
431
|
+
font-size: ${t.fontSize.xsmall};
|
|
432
|
+
font-weight: ${t.fontWeight.bold};
|
|
428
433
|
`, ue = c.form`
|
|
429
434
|
display: flex;
|
|
430
435
|
flex-direction: column;
|
|
@@ -434,14 +439,14 @@ const e = {
|
|
|
434
439
|
display: flex;
|
|
435
440
|
justify-content: space-between;
|
|
436
441
|
width: 100%;
|
|
437
|
-
`,
|
|
442
|
+
`, $e = c.div`
|
|
438
443
|
width: 100%;
|
|
439
444
|
display: flex;
|
|
440
445
|
flex-direction: column;
|
|
441
446
|
align-items: center;
|
|
442
447
|
justify-content: center;
|
|
443
448
|
`, Ce = ({
|
|
444
|
-
fieldsets:
|
|
449
|
+
fieldsets: e = null,
|
|
445
450
|
legendText: l,
|
|
446
451
|
isExpandable: o,
|
|
447
452
|
id: i,
|
|
@@ -452,62 +457,66 @@ const e = {
|
|
|
452
457
|
onChangeOfEditableOption: g,
|
|
453
458
|
handleAddingInputEntry: $,
|
|
454
459
|
hasSubmit: N = !1,
|
|
455
|
-
submitText:
|
|
460
|
+
submitText: y,
|
|
456
461
|
handleSubmit: C,
|
|
457
462
|
hasReset: w = !1,
|
|
458
|
-
resetText:
|
|
463
|
+
resetText: k,
|
|
459
464
|
handleReset: F,
|
|
460
465
|
hasCancel: v = !1,
|
|
461
466
|
cancelText: A,
|
|
462
467
|
handleCancel: S,
|
|
463
468
|
handleSubmitForm: z,
|
|
464
|
-
className:
|
|
469
|
+
className: D,
|
|
465
470
|
children: j
|
|
466
|
-
}) =>
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
471
|
+
}) => (console.log("Rendering DynamicForm", e), e?.forEach((a, f) => {
|
|
472
|
+
console.log("Fieldset index", f, "legend:", a.legend), a.inputs.forEach((s, x) => {
|
|
473
|
+
console.log("Input", x, "type:", s.type, "editing:", s.editing);
|
|
474
|
+
});
|
|
475
|
+
}), /* @__PURE__ */ u(ue, { id: `${i}-form`, className: D, onSubmit: z, children: [
|
|
476
|
+
e ? e.map((a, f) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
|
|
477
|
+
/* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${f}`, className: `${a.legend}-fieldset`, children: [
|
|
478
|
+
a.legend && /* @__PURE__ */ n(M, { className: `${a.legend}-legend`, children: a.legend }),
|
|
479
|
+
a.inputs.length !== 0 ? a.inputs.map((s, x) => /* @__PURE__ */ u(q.Fragment, { children: [
|
|
480
|
+
s.type === "textarea" && /* @__PURE__ */ n(
|
|
472
481
|
E,
|
|
473
482
|
{
|
|
474
483
|
...s,
|
|
475
|
-
id: s.id ?? `${
|
|
484
|
+
id: s.id ?? `${a.legend}-input`,
|
|
476
485
|
labelClass: d,
|
|
477
486
|
inputClass: h,
|
|
478
|
-
idx:
|
|
487
|
+
idx: x,
|
|
479
488
|
className: `${r} ${s?.uniqueClass}`
|
|
480
489
|
}
|
|
481
490
|
),
|
|
482
|
-
s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */
|
|
491
|
+
s.type !== "textarea" && s.type !== "radio" && s.type !== "checkbox" && /* @__PURE__ */ n(
|
|
483
492
|
E,
|
|
484
493
|
{
|
|
485
494
|
...s,
|
|
486
|
-
id: s.id ?? `${
|
|
495
|
+
id: s.id ?? `${a.legend}-input`,
|
|
487
496
|
labelClass: d,
|
|
488
497
|
inputClass: h,
|
|
489
|
-
idx:
|
|
498
|
+
idx: x,
|
|
490
499
|
className: `${r} ${s?.uniqueClass}`
|
|
491
500
|
}
|
|
492
501
|
),
|
|
493
502
|
(s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
|
|
494
|
-
/* @__PURE__ */
|
|
503
|
+
/* @__PURE__ */ n(
|
|
495
504
|
E,
|
|
496
505
|
{
|
|
497
506
|
...s,
|
|
498
|
-
id: s.id ?? `${
|
|
507
|
+
id: s.id ?? `${a.legend}-input`,
|
|
499
508
|
labelClass: d,
|
|
500
509
|
inputClass: h,
|
|
501
|
-
idx:
|
|
510
|
+
idx: x,
|
|
502
511
|
className: `${r} ${s?.uniqueClass}`
|
|
503
512
|
}
|
|
504
513
|
),
|
|
505
|
-
s.editing && s.isEditable && /* @__PURE__ */
|
|
514
|
+
s.editing && s.isEditable && /* @__PURE__ */ n(
|
|
506
515
|
P,
|
|
507
516
|
{
|
|
508
|
-
legend: `${
|
|
517
|
+
legend: `${a.legend}`,
|
|
509
518
|
fieldsetIndex: f,
|
|
510
|
-
idx:
|
|
519
|
+
idx: x,
|
|
511
520
|
editableInformation: s?.editableInformation || [],
|
|
512
521
|
onChangeOfEditableOption: g,
|
|
513
522
|
onClickSaveEdit: s?.onClickSave || ((L) => {
|
|
@@ -519,89 +528,89 @@ const e = {
|
|
|
519
528
|
}
|
|
520
529
|
)
|
|
521
530
|
] })
|
|
522
|
-
] }, `form-${i}-${
|
|
531
|
+
] }, `form-${i}-${x}`)) : a.isExpandable ? /* @__PURE__ */ n(O, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
|
|
523
532
|
] }),
|
|
524
|
-
|
|
525
|
-
] }, `${
|
|
533
|
+
a.isExpandable && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": f } }) })
|
|
534
|
+
] }, `${a.legend}-${f}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
|
|
526
535
|
/* @__PURE__ */ u(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
|
|
527
|
-
l && /* @__PURE__ */
|
|
528
|
-
!
|
|
529
|
-
|
|
536
|
+
l && /* @__PURE__ */ n(M, { className: `${l}-legend`, children: l }),
|
|
537
|
+
!e && m && m.length !== 0 ? m.map((a, f) => /* @__PURE__ */ u(q.Fragment, { children: [
|
|
538
|
+
a.type === "textarea" && /* @__PURE__ */ n(
|
|
530
539
|
E,
|
|
531
540
|
{
|
|
532
|
-
...
|
|
533
|
-
id:
|
|
541
|
+
...a,
|
|
542
|
+
id: a.id ?? `${l}-input`,
|
|
534
543
|
labelClass: d,
|
|
535
544
|
inputClass: h,
|
|
536
545
|
idx: f,
|
|
537
|
-
className: `${r} ${
|
|
546
|
+
className: `${r} ${a?.uniqueClass}`
|
|
538
547
|
}
|
|
539
548
|
),
|
|
540
|
-
|
|
549
|
+
a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ n(
|
|
541
550
|
E,
|
|
542
551
|
{
|
|
543
|
-
...
|
|
544
|
-
id:
|
|
552
|
+
...a,
|
|
553
|
+
id: a.id ?? `${l}-input`,
|
|
545
554
|
labelClass: d,
|
|
546
555
|
inputClass: h,
|
|
547
556
|
idx: f,
|
|
548
|
-
className: `${r} ${
|
|
557
|
+
className: `${r} ${a?.uniqueClass}`
|
|
549
558
|
}
|
|
550
559
|
),
|
|
551
|
-
(
|
|
552
|
-
/* @__PURE__ */
|
|
560
|
+
(a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ u(R, { children: [
|
|
561
|
+
/* @__PURE__ */ n(
|
|
553
562
|
E,
|
|
554
563
|
{
|
|
555
|
-
...
|
|
556
|
-
id:
|
|
564
|
+
...a,
|
|
565
|
+
id: a.id ?? `${l}-input`,
|
|
557
566
|
labelClass: d,
|
|
558
567
|
inputClass: h,
|
|
559
568
|
idx: f,
|
|
560
|
-
className: `${r} ${
|
|
569
|
+
className: `${r} ${a?.uniqueClass}`
|
|
561
570
|
}
|
|
562
571
|
),
|
|
563
|
-
|
|
572
|
+
a.editing && a.isEditable && /* @__PURE__ */ n(
|
|
564
573
|
P,
|
|
565
574
|
{
|
|
566
575
|
legend: `${l}`,
|
|
567
576
|
idx: f,
|
|
568
|
-
editableInformation:
|
|
577
|
+
editableInformation: a?.editableInformation,
|
|
569
578
|
onChangeOfEditableOption: g,
|
|
570
|
-
onClickSaveEdit:
|
|
579
|
+
onClickSaveEdit: a?.onClickSave || ((s) => {
|
|
571
580
|
}),
|
|
572
|
-
onClickCancelEdit:
|
|
581
|
+
onClickCancelEdit: a?.onClickCancel || ((s) => {
|
|
573
582
|
}),
|
|
574
|
-
onClickDeleteEntry:
|
|
583
|
+
onClickDeleteEntry: a?.onClickDelete || ((s) => {
|
|
575
584
|
})
|
|
576
585
|
}
|
|
577
586
|
)
|
|
578
587
|
] })
|
|
579
|
-
] }, `form-${i}-${f}`)) : o ? /* @__PURE__ */
|
|
588
|
+
] }, `form-${i}-${f}`)) : o ? /* @__PURE__ */ n(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
|
|
580
589
|
] }),
|
|
581
|
-
o && /* @__PURE__ */
|
|
590
|
+
o && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
|
|
582
591
|
] }),
|
|
583
|
-
/* @__PURE__ */
|
|
592
|
+
/* @__PURE__ */ n(
|
|
584
593
|
ge,
|
|
585
594
|
{
|
|
586
595
|
id: i,
|
|
587
596
|
hasSubmit: N,
|
|
588
|
-
submitText:
|
|
597
|
+
submitText: y,
|
|
589
598
|
handleSubmit: C,
|
|
590
599
|
hasReset: w,
|
|
591
|
-
resetText:
|
|
600
|
+
resetText: k,
|
|
592
601
|
handleReset: F,
|
|
593
602
|
hasCancel: v,
|
|
594
603
|
cancelText: A,
|
|
595
604
|
handleCancel: S
|
|
596
605
|
}
|
|
597
606
|
),
|
|
598
|
-
/* @__PURE__ */
|
|
599
|
-
] }),
|
|
607
|
+
/* @__PURE__ */ n($e, { className: "children-container", children: j })
|
|
608
|
+
] })), fe = (e) => {
|
|
600
609
|
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*\)$/;
|
|
601
|
-
return l.test(
|
|
602
|
-
}, b = (
|
|
603
|
-
if (
|
|
604
|
-
return
|
|
610
|
+
return l.test(e) || o.test(e) || CSS.supports("color", e);
|
|
611
|
+
}, b = (e) => {
|
|
612
|
+
if (!fe(e)) throw new Error(`Invalid color: ${e}`);
|
|
613
|
+
return e;
|
|
605
614
|
}, we = {
|
|
606
615
|
mobile: "320px",
|
|
607
616
|
//Small iPhone SE & Medium: iPhone 12-15
|
|
@@ -642,14 +651,14 @@ const e = {
|
|
|
642
651
|
error: b("#FAD4D4")
|
|
643
652
|
}
|
|
644
653
|
}, J = Q({}), Fe = ({
|
|
645
|
-
children:
|
|
654
|
+
children: e,
|
|
646
655
|
initialTheme: l = xe,
|
|
647
656
|
secondTheme: o = pe
|
|
648
657
|
}) => {
|
|
649
658
|
const [i, m] = V(l), r = () => {
|
|
650
659
|
m((d) => d === l ? o : l);
|
|
651
660
|
};
|
|
652
|
-
return /* @__PURE__ */
|
|
661
|
+
return /* @__PURE__ */ n(J.Provider, { value: { currentTheme: i, toggleTheme: r }, children: /* @__PURE__ */ n(Y, { theme: i, children: e }) });
|
|
653
662
|
}, Ee = () => X(J);
|
|
654
663
|
export {
|
|
655
664
|
Ce as DynamicForm,
|