@kbgarcia8/react-dynamic-form 1.1.28 → 1.1.30
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/react-dynamic-form.cjs.js +12 -12
- package/dist/react-dynamic-form.es.js +60 -60
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=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"}},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=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;
|
|
@@ -24,33 +24,33 @@
|
|
|
24
24
|
& .button-icon-text-space svg {
|
|
25
25
|
max-width: 100%;
|
|
26
26
|
}
|
|
27
|
-
`,
|
|
27
|
+
`,Q=c.div`
|
|
28
28
|
width: 100%;
|
|
29
29
|
display: flex;
|
|
30
30
|
flex-direction: row;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: center;
|
|
33
|
-
`,
|
|
33
|
+
`,V=c.img`
|
|
34
34
|
maxwidth: 100%;
|
|
35
|
-
`,
|
|
35
|
+
`,X=c.span`
|
|
36
36
|
font-size: ${t.fontSize.xsmall};
|
|
37
37
|
font-weight: ${t.fontWeight.medium};
|
|
38
38
|
font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
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(
|
|
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;
|
|
46
46
|
width: 100%;
|
|
47
47
|
margin-bottom: ${t.spacing.small};
|
|
48
|
-
`,
|
|
48
|
+
`,Z=c.div`
|
|
49
49
|
display: flex;
|
|
50
50
|
gap: ${t.spacing.xsmall};
|
|
51
51
|
width: auto;
|
|
52
52
|
height: auto;
|
|
53
|
-
`,
|
|
53
|
+
`,_=c.label`
|
|
54
54
|
display: flex;
|
|
55
55
|
align-items: center;
|
|
56
56
|
justify-content:center;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
height: auto;
|
|
68
68
|
object-fit: contain;
|
|
69
69
|
}
|
|
70
|
-
`,
|
|
70
|
+
`,I=c.div`
|
|
71
71
|
display: flex;
|
|
72
72
|
flex-direction: column;
|
|
73
73
|
align-items: center;
|
|
@@ -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:i,additionalInfo:s,$labelFlexDirection:o,source:m,svg:r,className:d,children:b})=>e.jsxs(
|
|
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
|
-
`,A=F.forwardRef((a,i)=>{const{type:s,id:o,onChange:m,isRequired:r,dataAttributes:d,disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{id:o,onChange:m,value:E,rows:y,cols:N,...d,className:h,ref:i,disabled:b,required:r})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:i,type:"checkbox",id:o,checked:y,onChange:m,disabled:b,className:h,...d})}const u=a,{value:j,pattern:$,placeholderText:k,...C}=u;return e.jsx(B,{id:o,name:o,placeholder:k,onChange:m,value:j,type:s,required:r,...d,className:h,ref:i,disabled:b,pattern:$})}),w=a=>{const{className:i,type:s,id:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:j,dataAttributes:$,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=a;return e.jsxs(
|
|
114
|
+
`,A=F.forwardRef((a,i)=>{const{type:s,id:o,onChange:m,isRequired:r,dataAttributes:d,disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{id:o,onChange:m,value:E,rows:y,cols:N,...d,className:h,ref:i,disabled:b,required:r})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:i,type:"checkbox",id:o,checked:y,onChange:m,disabled:b,className:h,...d})}const u=a,{value:j,pattern:$,placeholderText:k,...C}=u;return e.jsx(B,{id:o,name:o,placeholder:k,onChange:m,value:j,type:s,required:r,...d,className:h,ref:i,disabled:b,pattern:$})}),w=a=>{const{className:i,type:s,id:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:j,dataAttributes:$,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,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,...p}=a;return e.jsx(A,{id:o,name:o,type:"textarea",isRequired:j,onChange:u,value:l,rows:n,cols:g,dataAttributes:$,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:l,placeholderText:p,...z}=n;return e.jsx(A,{id:o,name:o,placeholderText:p,onChange:u,value:g,type:s,isRequired:j,dataAttributes:$,className:k,ref:C,disabled:y,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:o,id:o,isRequired:j,checked:n,onChange:u,disabled:y,className:k,dataAttributes:$}),e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Z,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:$}),e.jsx(f,{id:`editable-${o}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:$})]}),q]})},se=c.fieldset`
|
|
115
115
|
padding: 0;
|
|
116
116
|
height: auto;
|
|
117
117
|
width: 100%;
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
display: flex;
|
|
132
132
|
justify-content: space-between;
|
|
133
133
|
width: 100%;
|
|
134
|
-
`,P=({legend:a,fieldsetIndex:i=null,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(A,{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-
|
|
134
|
+
`,P=({legend:a,fieldsetIndex:i=null,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(A,{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%;
|
|
@@ -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:i,isExpandable:s,id:o,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:j=!1,submitText:$,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${o}-form`,className:T,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,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,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:p,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:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${o}-${p}`)):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-
|
|
177
|
+
`,xe=({fieldsets:a=null,legendText:i,isExpandable:s,id:o,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:j=!1,submitText:$,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${o}-form`,className:T,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,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,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:p,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:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${o}-${p}`)):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(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...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(w,{...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(w,{...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:j,submitText:$,handleSubmit:k,hasReset:C,resetText:y,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),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=F.createContext({}),ue=({children:a,initialTheme:i=G,secondTheme:s=J})=>{const[o,m]=F.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=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=J;exports.lightTheme=G;exports.useTheme=ge;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
2
|
-
import q, { forwardRef as
|
|
3
|
-
import c, { ThemeProvider as
|
|
1
|
+
import { jsx as a, jsxs as f, Fragment as R } from "react/jsx-runtime";
|
|
2
|
+
import q, { forwardRef as K, createContext as Q, useState as V, useContext as X } from "react";
|
|
3
|
+
import c, { ThemeProvider as Y } from "styled-components";
|
|
4
4
|
const e = {
|
|
5
5
|
fonts: {
|
|
6
6
|
secondary: "Raleway",
|
|
@@ -32,7 +32,7 @@ const e = {
|
|
|
32
32
|
thin: "0.0625rem",
|
|
33
33
|
light: "0.125rem"
|
|
34
34
|
}
|
|
35
|
-
},
|
|
35
|
+
}, Z = c.button`
|
|
36
36
|
display: flex;
|
|
37
37
|
align-items: center;
|
|
38
38
|
justify-content: center;
|
|
@@ -58,13 +58,13 @@ const e = {
|
|
|
58
58
|
& .button-icon-text-space svg {
|
|
59
59
|
max-width: 100%;
|
|
60
60
|
}
|
|
61
|
-
`,
|
|
61
|
+
`, _ = c.div`
|
|
62
62
|
width: 100%;
|
|
63
63
|
display: flex;
|
|
64
64
|
flex-direction: row;
|
|
65
65
|
align-items: center;
|
|
66
66
|
justify-content: center;
|
|
67
|
-
`,
|
|
67
|
+
`, I = c.img`
|
|
68
68
|
maxwidth: 100%;
|
|
69
69
|
`, ee = c.span`
|
|
70
70
|
font-size: ${e.fontSize.xsmall};
|
|
@@ -82,17 +82,17 @@ const e = {
|
|
|
82
82
|
alt: r = "alt-button-icon",
|
|
83
83
|
text: d = "",
|
|
84
84
|
className: h = "",
|
|
85
|
-
dataAttributes:
|
|
85
|
+
dataAttributes: u = {}
|
|
86
86
|
}) => /* @__PURE__ */ a(
|
|
87
|
-
|
|
87
|
+
Z,
|
|
88
88
|
{
|
|
89
89
|
onClick: t,
|
|
90
90
|
id: i,
|
|
91
91
|
type: o,
|
|
92
92
|
className: h,
|
|
93
|
-
...
|
|
94
|
-
children: /* @__PURE__ */
|
|
95
|
-
l ? /* @__PURE__ */ a(
|
|
93
|
+
...u,
|
|
94
|
+
children: /* @__PURE__ */ f(_, { className: "button-icon-text-space", children: [
|
|
95
|
+
l ? /* @__PURE__ */ a(I, { src: l, alt: r }) : m || "",
|
|
96
96
|
d && /* @__PURE__ */ a(ee, { id: i, children: d })
|
|
97
97
|
] })
|
|
98
98
|
}
|
|
@@ -147,9 +147,9 @@ const e = {
|
|
|
147
147
|
svg: r,
|
|
148
148
|
className: d,
|
|
149
149
|
children: h
|
|
150
|
-
}) => /* @__PURE__ */
|
|
150
|
+
}) => /* @__PURE__ */ f(ne, { htmlFor: t, className: d, $labelFlexDirection: l, children: [
|
|
151
151
|
(m || r) && /* @__PURE__ */ a(ie, { className: "label-icon-container", children: m ? /* @__PURE__ */ a("img", { src: m, alt: `${t}-label-icon` }) : r || "" }),
|
|
152
|
-
/* @__PURE__ */
|
|
152
|
+
/* @__PURE__ */ f(oe, { className: "label-text-container", children: [
|
|
153
153
|
/* @__PURE__ */ a(le, { className: "main-label", children: i }),
|
|
154
154
|
o && /* @__PURE__ */ a(se, { className: "additional-info", children: o })
|
|
155
155
|
] }),
|
|
@@ -184,8 +184,8 @@ const e = {
|
|
|
184
184
|
max-width: 100%;
|
|
185
185
|
resize: none;
|
|
186
186
|
overflow-y: auto;
|
|
187
|
-
`, D =
|
|
188
|
-
const { type: o, id: l, onChange: m, isRequired: r, dataAttributes: d, disabled: h, className:
|
|
187
|
+
`, D = K((t, i) => {
|
|
188
|
+
const { type: o, id: l, onChange: m, isRequired: r, dataAttributes: d, disabled: h, className: u } = t;
|
|
189
189
|
if (o === "textarea") {
|
|
190
190
|
const { rows: y = 5, cols: F = 30, value: v, ...A } = t;
|
|
191
191
|
return /* @__PURE__ */ a(
|
|
@@ -197,7 +197,7 @@ const e = {
|
|
|
197
197
|
rows: y,
|
|
198
198
|
cols: F,
|
|
199
199
|
...d,
|
|
200
|
-
className:
|
|
200
|
+
className: u,
|
|
201
201
|
ref: i,
|
|
202
202
|
disabled: h,
|
|
203
203
|
required: r
|
|
@@ -215,7 +215,7 @@ const e = {
|
|
|
215
215
|
checked: y,
|
|
216
216
|
onChange: m,
|
|
217
217
|
disabled: h,
|
|
218
|
-
className:
|
|
218
|
+
className: u,
|
|
219
219
|
...d
|
|
220
220
|
}
|
|
221
221
|
);
|
|
@@ -232,7 +232,7 @@ const e = {
|
|
|
232
232
|
type: o,
|
|
233
233
|
required: r,
|
|
234
234
|
...d,
|
|
235
|
-
className:
|
|
235
|
+
className: u,
|
|
236
236
|
ref: i,
|
|
237
237
|
disabled: h,
|
|
238
238
|
pattern: p
|
|
@@ -247,7 +247,7 @@ const e = {
|
|
|
247
247
|
additionalInfo: r,
|
|
248
248
|
$labelFlexDirection: d,
|
|
249
249
|
svg: h,
|
|
250
|
-
labelClass:
|
|
250
|
+
labelClass: u,
|
|
251
251
|
onChange: g,
|
|
252
252
|
isRequired: N,
|
|
253
253
|
dataAttributes: p,
|
|
@@ -262,8 +262,8 @@ const e = {
|
|
|
262
262
|
idx: T,
|
|
263
263
|
children: j
|
|
264
264
|
} = t;
|
|
265
|
-
return /* @__PURE__ */
|
|
266
|
-
o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className:
|
|
265
|
+
return /* @__PURE__ */ f(te, { className: `${i} ${l.replace("#", "")}-label-input-container`, children: [
|
|
266
|
+
o !== "radio" && o !== "checkbox" && /* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: u }),
|
|
267
267
|
o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
|
|
268
268
|
const { rows: n = 5, cols: $ = 30, value: s, ...k } = t;
|
|
269
269
|
return /* @__PURE__ */ a(
|
|
@@ -306,7 +306,7 @@ const e = {
|
|
|
306
306
|
})(),
|
|
307
307
|
(o === "radio" || o === "checkbox") && (() => {
|
|
308
308
|
const { checked: n, ...$ } = t;
|
|
309
|
-
return /* @__PURE__ */
|
|
309
|
+
return /* @__PURE__ */ f(R, { children: [
|
|
310
310
|
/* @__PURE__ */ a(
|
|
311
311
|
D,
|
|
312
312
|
{
|
|
@@ -322,10 +322,10 @@ const e = {
|
|
|
322
322
|
dataAttributes: p
|
|
323
323
|
}
|
|
324
324
|
),
|
|
325
|
-
/* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className:
|
|
325
|
+
/* @__PURE__ */ a(B, { htmlFor: l, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: u })
|
|
326
326
|
] });
|
|
327
327
|
})(),
|
|
328
|
-
F && /* @__PURE__ */
|
|
328
|
+
F && /* @__PURE__ */ f(ae, { className: "input-edit-buttons", children: [
|
|
329
329
|
/* @__PURE__ */ a(x, { id: `editable-${l}-edit-btn`, svg: v, buttonType: "button", onClick: A, className: `edit-radio-${T}`, dataAttributes: p }),
|
|
330
330
|
/* @__PURE__ */ a(x, { id: `editable-${l}-delete-btn`, svg: S, buttonType: "button", onClick: z, className: `delete-radio-${T}`, dataAttributes: p })
|
|
331
331
|
] }),
|
|
@@ -360,36 +360,36 @@ const e = {
|
|
|
360
360
|
onClickSaveEdit: r,
|
|
361
361
|
onClickCancelEdit: d,
|
|
362
362
|
onClickDeleteEntry: h
|
|
363
|
-
}) => /* @__PURE__ */
|
|
363
|
+
}) => /* @__PURE__ */ f(re, { className: "editable-option-fieldset", children: [
|
|
364
364
|
/* @__PURE__ */ a(de, { children: `${t} ${o + 1}` }),
|
|
365
|
-
l?.map((
|
|
365
|
+
l?.map((u, g) => /* @__PURE__ */ a(me, { className: "editable-option-container", children: /* @__PURE__ */ a(
|
|
366
366
|
D,
|
|
367
367
|
{
|
|
368
368
|
id: `editable-option-${g}`,
|
|
369
369
|
name: `editable-option-${g}`,
|
|
370
|
-
placeholderText:
|
|
370
|
+
placeholderText: u.name.charAt(0).toUpperCase() + u.name.slice(1),
|
|
371
371
|
onChange: m,
|
|
372
|
-
value:
|
|
373
|
-
type:
|
|
372
|
+
value: u.info,
|
|
373
|
+
type: u.type,
|
|
374
374
|
isRequired: !0,
|
|
375
375
|
className: "editable-option",
|
|
376
376
|
dataAttributes: {
|
|
377
377
|
"data-index": g,
|
|
378
|
-
"data-
|
|
379
|
-
"data-key":
|
|
378
|
+
"data-fieldsetindex": i,
|
|
379
|
+
"data-key": u.info
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
|
-
) }, `${
|
|
383
|
-
/* @__PURE__ */
|
|
384
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-
|
|
385
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-
|
|
386
|
-
/* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-
|
|
382
|
+
) }, `${u.name}-${g}`)),
|
|
383
|
+
/* @__PURE__ */ f(be, { className: "editable-option-button-space", children: [
|
|
384
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
|
|
385
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } }),
|
|
386
|
+
/* @__PURE__ */ a(x, { id: `editable-option-${o}-delete`, buttonType: "button", text: "Delete", onClick: h, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": i } })
|
|
387
387
|
] })
|
|
388
388
|
] }), he = c.div`
|
|
389
389
|
display: flex;
|
|
390
390
|
justify-content: space-between;
|
|
391
391
|
max-width: 100%;
|
|
392
|
-
`,
|
|
392
|
+
`, ue = ({
|
|
393
393
|
id: t,
|
|
394
394
|
hasSubmit: i,
|
|
395
395
|
submitText: o,
|
|
@@ -398,12 +398,12 @@ const e = {
|
|
|
398
398
|
resetText: r,
|
|
399
399
|
handleReset: d,
|
|
400
400
|
hasCancel: h,
|
|
401
|
-
cancelText:
|
|
401
|
+
cancelText: u,
|
|
402
402
|
handleCancel: g
|
|
403
|
-
}) => /* @__PURE__ */
|
|
403
|
+
}) => /* @__PURE__ */ f(he, { className: "form-main-button-container", children: [
|
|
404
404
|
i && /* @__PURE__ */ a(x, { id: `form-${t}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: l, className: "submit-form-btn" }),
|
|
405
405
|
m && /* @__PURE__ */ a(x, { id: `form-${t}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
|
|
406
|
-
h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text:
|
|
406
|
+
h && /* @__PURE__ */ a(x, { id: `form-${t}-cancel`, buttonType: "button", text: u ?? "Cancel", onClick: g, className: "cancel-form-btn" })
|
|
407
407
|
] }), M = c.legend`
|
|
408
408
|
font-size: ${e.spacing.medium};
|
|
409
409
|
font-weight: 500;
|
|
@@ -428,7 +428,7 @@ const e = {
|
|
|
428
428
|
font-family: ${e.fonts.tertiary}, ${e.fonts.fallback};
|
|
429
429
|
font-size: ${e.fontSize.xsmall};
|
|
430
430
|
font-weight: ${e.fontWeight.bold};
|
|
431
|
-
`,
|
|
431
|
+
`, fe = c.form`
|
|
432
432
|
display: flex;
|
|
433
433
|
flex-direction: column;
|
|
434
434
|
align-items: center;
|
|
@@ -452,7 +452,7 @@ const e = {
|
|
|
452
452
|
labelAndInputContainerClass: r,
|
|
453
453
|
labelClass: d,
|
|
454
454
|
inputClass: h,
|
|
455
|
-
onChangeOfEditableOption:
|
|
455
|
+
onChangeOfEditableOption: u,
|
|
456
456
|
handleAddingInputEntry: g,
|
|
457
457
|
hasSubmit: N = !1,
|
|
458
458
|
submitText: p,
|
|
@@ -466,11 +466,11 @@ const e = {
|
|
|
466
466
|
handleSubmitForm: z,
|
|
467
467
|
className: T,
|
|
468
468
|
children: j
|
|
469
|
-
}) => /* @__PURE__ */
|
|
470
|
-
t ? t.map((n, $) => /* @__PURE__ */
|
|
471
|
-
/* @__PURE__ */
|
|
469
|
+
}) => /* @__PURE__ */ f(fe, { id: `${l}-form`, className: T, onSubmit: z, children: [
|
|
470
|
+
t ? t.map((n, $) => /* @__PURE__ */ f(H, { className: `${l}-fieldset-wrapper`, children: [
|
|
471
|
+
/* @__PURE__ */ f(U, { id: `${l}-form-fieldset-${$}`, className: `${n.legend}-fieldset`, children: [
|
|
472
472
|
n.legend && /* @__PURE__ */ a(M, { className: `${n.legend}-legend`, children: n.legend }),
|
|
473
|
-
n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */
|
|
473
|
+
n.inputs.length !== 0 ? n.inputs.map((s, k) => /* @__PURE__ */ f(q.Fragment, { children: [
|
|
474
474
|
s.type === "textarea" && /* @__PURE__ */ a(
|
|
475
475
|
E,
|
|
476
476
|
{
|
|
@@ -493,7 +493,7 @@ const e = {
|
|
|
493
493
|
className: `${r} ${s?.uniqueClass}`
|
|
494
494
|
}
|
|
495
495
|
),
|
|
496
|
-
(s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */
|
|
496
|
+
(s.type === "radio" || s.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
|
|
497
497
|
/* @__PURE__ */ a(
|
|
498
498
|
E,
|
|
499
499
|
{
|
|
@@ -512,7 +512,7 @@ const e = {
|
|
|
512
512
|
fieldsetIndex: $,
|
|
513
513
|
idx: k,
|
|
514
514
|
editableInformation: s?.editableInformation || [],
|
|
515
|
-
onChangeOfEditableOption:
|
|
515
|
+
onChangeOfEditableOption: u,
|
|
516
516
|
onClickSaveEdit: s?.onClickSave || ((L) => {
|
|
517
517
|
}),
|
|
518
518
|
onClickCancelEdit: s?.onClickCancel || ((L) => {
|
|
@@ -524,11 +524,11 @@ const e = {
|
|
|
524
524
|
] })
|
|
525
525
|
] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
|
|
526
526
|
] }),
|
|
527
|
-
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-
|
|
528
|
-
] }, `${n.legend}-${$}`)) : /* @__PURE__ */
|
|
529
|
-
/* @__PURE__ */
|
|
527
|
+
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": $ } }) })
|
|
528
|
+
] }, `${n.legend}-${$}`)) : /* @__PURE__ */ f(H, { className: `${l}-fieldset-wrapper`, children: [
|
|
529
|
+
/* @__PURE__ */ f(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
|
|
530
530
|
i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
|
|
531
|
-
!t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */
|
|
531
|
+
!t && m && m.length !== 0 ? m.map((n, $) => /* @__PURE__ */ f(q.Fragment, { children: [
|
|
532
532
|
n.type === "textarea" && /* @__PURE__ */ a(
|
|
533
533
|
E,
|
|
534
534
|
{
|
|
@@ -551,7 +551,7 @@ const e = {
|
|
|
551
551
|
className: `${r} ${n?.uniqueClass}`
|
|
552
552
|
}
|
|
553
553
|
),
|
|
554
|
-
(n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */
|
|
554
|
+
(n.type === "radio" || n.type === "checkbox") && /* @__PURE__ */ f(R, { children: [
|
|
555
555
|
/* @__PURE__ */ a(
|
|
556
556
|
E,
|
|
557
557
|
{
|
|
@@ -569,7 +569,7 @@ const e = {
|
|
|
569
569
|
legend: `${i}`,
|
|
570
570
|
idx: $,
|
|
571
571
|
editableInformation: n?.editableInformation,
|
|
572
|
-
onChangeOfEditableOption:
|
|
572
|
+
onChangeOfEditableOption: u,
|
|
573
573
|
onClickSaveEdit: n?.onClickSave || ((s) => {
|
|
574
574
|
}),
|
|
575
575
|
onClickCancelEdit: n?.onClickCancel || ((s) => {
|
|
@@ -584,7 +584,7 @@ const e = {
|
|
|
584
584
|
o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${i}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
|
|
585
585
|
] }),
|
|
586
586
|
/* @__PURE__ */ a(
|
|
587
|
-
|
|
587
|
+
ue,
|
|
588
588
|
{
|
|
589
589
|
id: l,
|
|
590
590
|
hasSubmit: N,
|
|
@@ -644,19 +644,19 @@ const e = {
|
|
|
644
644
|
warning: b("#FCFFC1"),
|
|
645
645
|
error: b("#FAD4D4")
|
|
646
646
|
}
|
|
647
|
-
},
|
|
647
|
+
}, J = Q({}), Fe = ({
|
|
648
648
|
children: t,
|
|
649
649
|
initialTheme: i = xe,
|
|
650
650
|
secondTheme: o = pe
|
|
651
651
|
}) => {
|
|
652
|
-
const [l, m] =
|
|
652
|
+
const [l, m] = V(i), r = () => {
|
|
653
653
|
m((d) => d === i ? o : i);
|
|
654
654
|
};
|
|
655
|
-
return /* @__PURE__ */ a(
|
|
656
|
-
}, Ee = () =>
|
|
655
|
+
return /* @__PURE__ */ a(J.Provider, { value: { currentTheme: l, toggleTheme: r }, children: /* @__PURE__ */ a(Y, { theme: l, children: t }) });
|
|
656
|
+
}, Ee = () => X(J);
|
|
657
657
|
export {
|
|
658
658
|
Ce as DynamicForm,
|
|
659
|
-
|
|
659
|
+
J as ThemeContext,
|
|
660
660
|
Fe as ThemeContextProvider,
|
|
661
661
|
we as breakpoints,
|
|
662
662
|
pe as darkTheme,
|