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