@flipdish/portal-library 1.0.31 → 1.0.32
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/ui/Form/GenericTextField.cjs.js +1 -1
- package/dist/components/ui/Form/GenericTextField.cjs.js.map +1 -1
- package/dist/components/ui/Form/GenericTextField.js +1 -1
- package/dist/components/ui/Form/GenericTextField.js.map +1 -1
- package/dist/components/ui/PageLayout/PageLayout.cjs.js +1 -1
- package/dist/components/ui/PageLayout/PageLayout.cjs.js.map +1 -1
- package/dist/components/ui/PageLayout/PageLayout.d.ts +3 -1
- package/dist/components/ui/PageLayout/PageLayout.js +1 -1
- package/dist/components/ui/PageLayout/PageLayout.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("formik"),t=require("@mui/material/TextField"),i=require("../../custom-hooks/useRenderValidText.cjs.js"),a=require("./FormItemLayout.cjs.js"),l=require("@mui/material/Typography");module.exports=({label:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("formik"),t=require("@mui/material/TextField"),i=require("../../custom-hooks/useRenderValidText.cjs.js"),a=require("./FormItemLayout.cjs.js"),l=require("@mui/material/Typography");module.exports=({label:o,fieldName:d,placeholder:n,validation:s,multiline:u,layout:m="horizontal",variant:h="standard",disabled:c=!1})=>{const p=()=>e.jsx(r.Field,{name:d,validate:s,children:({field:r,form:a})=>{const{errors:l,touched:s,isSubmitting:p}=a,v=l[r.name],x=!!v&&s[r.name],g=i({fieldError:v,showError:x,touched:!!s[r.name],value:r.value});return e.jsx(t,{label:"standard"===h?void 0:o,variant:h,value:r.value,"data-testid":`text-field-${d}`,autoComplete:"off",fullWidth:!0,multiline:!0,minRows:u?3:1,style:{paddingRight:"horizontal"===m?16:0},placeholder:n||void 0,disabled:p||c,error:x,helperText:g,FormHelperTextProps:{children:" ",style:{textAlign:"right"}},inputProps:{style:{paddingTop:0,height:"1.1876em"}},onChange:e=>{a.setFieldValue(r.name,e.target.value)}})}});return"vertical"===m?e.jsxs(e.Fragment,{children:["standard"===h&&e.jsx(l,{variant:"subtitle1",component:"h3",color:"textPrimary",children:o}),p()]}):e.jsx(a,{label:o,children:p()})};
|
|
2
2
|
//# sourceMappingURL=GenericTextField.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericTextField.cjs.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\n\ntype Props = {\n label: string;\n fieldName: string;\n placeholder?: string;\n validation?: (value: string) => string | undefined;\n multiline?: boolean;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n};\n\nconst GenericTextField = ({\n label,\n fieldName,\n placeholder,\n validation,\n multiline,\n layout = 'horizontal',\n variant = 'standard',\n disabled = false,\n}: Props) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <TextField\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n value={field.value}\n data-testid={`text-field-${fieldName}`}\n autoComplete=\"off\"\n fullWidth\n multiline\n minRows={multiline ? 3 : 1}\n style={{ paddingRight: 16 }}\n placeholder={placeholder ? placeholder : undefined}\n disabled={isSubmitting || disabled}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n inputProps={{\n style: {\n paddingTop: 0,\n height: '1.1876em',\n },\n }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(field.name, e.target.value);\n }}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["label","fieldName","placeholder","validation","multiline","layout","variant","disabled","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","
|
|
1
|
+
{"version":3,"file":"GenericTextField.cjs.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\n\ntype Props = {\n label: string;\n fieldName: string;\n placeholder?: string;\n validation?: (value: string) => string | undefined;\n multiline?: boolean;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n};\n\nconst GenericTextField = ({\n label,\n fieldName,\n placeholder,\n validation,\n multiline,\n layout = 'horizontal',\n variant = 'standard',\n disabled = false,\n}: Props) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <TextField\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n value={field.value}\n data-testid={`text-field-${fieldName}`}\n autoComplete=\"off\"\n fullWidth\n multiline\n minRows={multiline ? 3 : 1}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n placeholder={placeholder ? placeholder : undefined}\n disabled={isSubmitting || disabled}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n inputProps={{\n style: {\n paddingTop: 0,\n height: '1.1876em',\n },\n }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(field.name, e.target.value);\n }}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["label","fieldName","placeholder","validation","multiline","layout","variant","disabled","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","TextField","undefined","autoComplete","fullWidth","minRows","style","paddingRight","error","FormHelperTextProps","textAlign","inputProps","paddingTop","height","onChange","e","setFieldValue","target","_jsxs","jsxs","_Fragment","jsx","Typography","component","color","FormItemLayout"],"mappings":"6PAmByB,EACrBA,QACAC,YACAC,cACAC,aACAC,YACAC,SAAS,aACTC,UAAU,WACVC,YAAW,MAEX,MAAMC,EAAc,IAEZC,MAACC,EAAAA,OAAMC,KAAMV,EAAWW,SAAUT,EAAUU,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACId,MAACe,EAAS,CACNxB,MAAmB,aAAZM,OAAyBmB,EAAYzB,EAC5CM,QAASA,EACTiB,MAAOT,EAAMS,MACA,cAAA,cAActB,IAC3ByB,aAAa,MACbC,WAAS,EACTvB,WACA,EAAAwB,QAASxB,EAAY,EAAI,EACzByB,MAAO,CAAEC,aAAyB,eAAXzB,EAA0B,GAAK,GACtDH,YAAaA,QAA4BuB,EACzClB,SAAUW,GAAgBX,EAC1BwB,MAAOX,EACPC,WAAYA,EACZW,oBAAqB,CACjBnB,SAAU,IACVgB,MAAO,CAAEI,UAAW,UAExBC,WAAY,CACRL,MAAO,CACHM,WAAY,EACZC,OAAQ,aAGhBC,SAAWC,IAEPvB,EAAKwB,cAAczB,EAAMH,KAAM2B,EAAEE,OAAOjB,MAAM,GAGxD,IAMlB,MAAe,aAAXlB,EAEIoC,EAAAC,KAAAC,WAAA,CAAA9B,SAAA,CACiB,aAAZP,GACGG,EAAAmC,IAACC,EAAU,CAACvC,QAAQ,YAAYwC,UAAU,KAAKC,MAAM,cAChDlC,SAAAb,IAGRQ,OAKNC,EAAAmC,IAACI,EAAc,CAAChD,MAAOA,EAAQa,SAAAL,KAA+B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Field as a}from"formik";import i from"@mui/material/TextField";import l from"../../custom-hooks/useRenderValidText.js";import o from"./FormItemLayout.js";import d from"@mui/material/Typography";const
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Field as a}from"formik";import i from"@mui/material/TextField";import l from"../../custom-hooks/useRenderValidText.js";import o from"./FormItemLayout.js";import d from"@mui/material/Typography";const n=({label:n,fieldName:m,placeholder:s,validation:u,multiline:h,layout:p="horizontal",variant:c="standard",disabled:f=!1})=>{const v=()=>r(a,{name:m,validate:u,children:({field:e,form:t})=>{const{errors:a,touched:o,isSubmitting:d}=t,u=a[e.name],v=!!u&&o[e.name],g=l({fieldError:u,showError:v,touched:!!o[e.name],value:e.value});return r(i,{label:"standard"===c?void 0:n,variant:c,value:e.value,"data-testid":`text-field-${m}`,autoComplete:"off",fullWidth:!0,multiline:!0,minRows:h?3:1,style:{paddingRight:"horizontal"===p?16:0},placeholder:s||void 0,disabled:d||f,error:v,helperText:g,FormHelperTextProps:{children:" ",style:{textAlign:"right"}},inputProps:{style:{paddingTop:0,height:"1.1876em"}},onChange:r=>{t.setFieldValue(e.name,r.target.value)}})}});return"vertical"===p?e(t,{children:["standard"===c&&r(d,{variant:"subtitle1",component:"h3",color:"textPrimary",children:n}),v()]}):r(o,{label:n,children:v()})};export{n as default};
|
|
2
2
|
//# sourceMappingURL=GenericTextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericTextField.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\n\ntype Props = {\n label: string;\n fieldName: string;\n placeholder?: string;\n validation?: (value: string) => string | undefined;\n multiline?: boolean;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n};\n\nconst GenericTextField = ({\n label,\n fieldName,\n placeholder,\n validation,\n multiline,\n layout = 'horizontal',\n variant = 'standard',\n disabled = false,\n}: Props) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <TextField\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n value={field.value}\n data-testid={`text-field-${fieldName}`}\n autoComplete=\"off\"\n fullWidth\n multiline\n minRows={multiline ? 3 : 1}\n style={{ paddingRight: 16 }}\n placeholder={placeholder ? placeholder : undefined}\n disabled={isSubmitting || disabled}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n inputProps={{\n style: {\n paddingTop: 0,\n height: '1.1876em',\n },\n }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(field.name, e.target.value);\n }}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["GenericTextField","label","fieldName","placeholder","validation","multiline","layout","variant","disabled","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","TextField","undefined","autoComplete","fullWidth","minRows","style","paddingRight","error","FormHelperTextProps","textAlign","inputProps","paddingTop","height","onChange","e","setFieldValue","target","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"yQAmBM,MAAAA,EAAmB,EACrBC,QACAC,YACAC,cACAC,aACAC,YACAC,SAAS,aACTC,UAAU,WACVC,YAAW,MAEX,MAAMC,EAAc,IAEZC,EAACC,GAAMC,KAAMV,EAAWW,SAAUT,EAAUU,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACId,EAACe,
|
|
1
|
+
{"version":3,"file":"GenericTextField.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\n\ntype Props = {\n label: string;\n fieldName: string;\n placeholder?: string;\n validation?: (value: string) => string | undefined;\n multiline?: boolean;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n};\n\nconst GenericTextField = ({\n label,\n fieldName,\n placeholder,\n validation,\n multiline,\n layout = 'horizontal',\n variant = 'standard',\n disabled = false,\n}: Props) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <TextField\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n value={field.value}\n data-testid={`text-field-${fieldName}`}\n autoComplete=\"off\"\n fullWidth\n multiline\n minRows={multiline ? 3 : 1}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n placeholder={placeholder ? placeholder : undefined}\n disabled={isSubmitting || disabled}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n inputProps={{\n style: {\n paddingTop: 0,\n height: '1.1876em',\n },\n }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(field.name, e.target.value);\n }}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["GenericTextField","label","fieldName","placeholder","validation","multiline","layout","variant","disabled","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","TextField","undefined","autoComplete","fullWidth","minRows","style","paddingRight","error","FormHelperTextProps","textAlign","inputProps","paddingTop","height","onChange","e","setFieldValue","target","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"yQAmBM,MAAAA,EAAmB,EACrBC,QACAC,YACAC,cACAC,aACAC,YACAC,SAAS,aACTC,UAAU,WACVC,YAAW,MAEX,MAAMC,EAAc,IAEZC,EAACC,GAAMC,KAAMV,EAAWW,SAAUT,EAAUU,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACId,EAACe,EAAS,CACNxB,MAAmB,aAAZM,OAAyBmB,EAAYzB,EAC5CM,QAASA,EACTiB,MAAOT,EAAMS,MACA,cAAA,cAActB,IAC3ByB,aAAa,MACbC,WAAS,EACTvB,WACA,EAAAwB,QAASxB,EAAY,EAAI,EACzByB,MAAO,CAAEC,aAAyB,eAAXzB,EAA0B,GAAK,GACtDH,YAAaA,QAA4BuB,EACzClB,SAAUW,GAAgBX,EAC1BwB,MAAOX,EACPC,WAAYA,EACZW,oBAAqB,CACjBnB,SAAU,IACVgB,MAAO,CAAEI,UAAW,UAExBC,WAAY,CACRL,MAAO,CACHM,WAAY,EACZC,OAAQ,aAGhBC,SAAWC,IAEPvB,EAAKwB,cAAczB,EAAMH,KAAM2B,EAAEE,OAAOjB,MAAM,GAGxD,IAMlB,MAAe,aAAXlB,EAEIoC,EAAAC,EAAA,CAAA7B,SAAA,CACiB,aAAZP,GACGG,EAACkC,EAAU,CAACrC,QAAQ,YAAYsC,UAAU,KAAKC,MAAM,cAChDhC,SAAAb,IAGRQ,OAKNC,EAACqC,EAAc,CAAC9C,MAAOA,EAAQa,SAAAL,KAA+B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/icons-material/Add"),t=require("@mui/icons-material/ArrowBack"),n=require("@mui/material/Grid"),r=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("@mui/material/useMediaQuery"),d=require("./DocumentTitle.cjs.js"),l=require("./FullWidthContainer.cjs.js"),c=require("../FDErrorBoundary/FDErrorBoundary.cjs.js"),m=require("@mui/material/Button"),p=require("../../../
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/icons-material/Add"),t=require("@mui/icons-material/ArrowBack"),n=require("@mui/material/Grid"),r=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("@mui/material/useMediaQuery"),d=require("./DocumentTitle.cjs.js"),l=require("./FullWidthContainer.cjs.js"),c=require("../FDErrorBoundary/FDErrorBoundary.cjs.js"),m=require("@mui/material/Button"),p=require("../../../utilities/renderUtilities.cjs.js"),g=require("../../../utilities/validation.cjs.js"),h=require("../Spacer/Spacer.cjs.js"),u=require("@mui/material/Box"),x=require("@mui/material/Divider");const j=1112,y=a.styled("div")((({theme:e,fluid:i})=>({maxWidth:i?"none":j,[e.breakpoints.down("md")]:{maxWidth:"none"},margin:e.spacing(2,4)}))),f=a.styled(n)((({theme:e})=>({[e.breakpoints.down("sm")]:{width:"100%",paddingTop:e.spacing(2)}}))),v=a.styled(n)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),b=a.styled(n)((({theme:e})=>({paddingTop:e.spacing(2)}))),k=a.styled(n)((()=>({flexGrow:1}))),B=a.styled("div")((({theme:e})=>({maxWidth:j,paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),q=a.styled(r)((({theme:e,hasTitleComponent:i})=>({margin:i?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("sm")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(-2)}}))),w=a.styled("div")((({theme:e})=>({maxWidth:j,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("md")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("sm")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),T=a.styled(n)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),W=a.styled(s)((()=>({lineHeight:"26px"}))),F=a.styled(s)((()=>({fontWeight:"bold"}))),L=a.styled(x)((({theme:e})=>({marginBottom:e.spacing(4)}))),C=({title:i})=>e.jsx(F,{variant:"h5",component:"h2",children:i});exports.PageTitle=C,exports.default=r=>{const{actionBtnTitle:s,caption:x,children:j,contextButtons:F,documentTitle:A,fluid:D=!1,fullWidth:I,header:P,hideHeader:R,actionButtonLink:z,openLinkInNewTab:_=!1,pageHeader:G,showActionButton:H,showAddIcon:M,strictToParent:E,title:S,titleComponent:U,toParent:N,navigate:O,hideDivider:Q=!1,customActionButtons:$}=r,J=a.useTheme(),K=o(J.breakpoints.down("md")),V=p.getMicroFrontendAttribute("data-portal-base-url")||"/",X=z?.startsWith("https://"),Y=X?z:void 0!==z?g.joinUrlPaths(V,z):"";return e.jsxs(y,{fluid:D,children:[A&&e.jsx(d,{children:A}),G||null,e.jsxs(w,{children:[G&&e.jsx(h,{size:16,variant:"vertical"}),!R&&e.jsxs(e.Fragment,{children:[e.jsxs(v,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(n,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:e.jsx(T,{item:!0,children:F&&F.map((i=>e.jsx(e.Fragment,{children:i})))})}),e.jsxs(b,{item:!0,container:!0,children:[N&&e.jsx(u,{children:e.jsx(q,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!U,component:"button",onClick:()=>{N&&E||N&&history.length<3?O(N):O(-1)},children:e.jsx(t,{})})}),e.jsxs(k,{item:!0,children:[U?e.jsx(U,{}):e.jsx(C,{title:S}),x&&e.jsx(W,{variant:"caption",component:"h3",children:x})]}),H&&e.jsxs(e.Fragment,{children:[K&&e.jsx(h,{size:56,variant:"vertical"}),e.jsx(f,{item:!0,children:e.jsxs(m,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${s}`,href:_||X?Y:"",target:_?"_blank":void 0,rel:_?"noopener noreferrer":void 0,onClick:_||X?()=>{}:()=>O(z),children:[M&&e.jsx(i,{}),s]})})]}),$&&$.map((i=>e.jsxs(e.Fragment,{children:[K&&e.jsx(h,{size:56,variant:"vertical"}),!K&&e.jsx(h,{size:16,variant:"vertical"}),e.jsx(f,{item:!0,children:i})]})))]})]}),!Q&&e.jsx(L,{})]}),e.jsxs(l,{fullWidth:I,children:[P?e.jsx(B,{children:P}):null,e.jsx(c,{identifier:A,children:e.jsx(e.Fragment,{children:j})})]})]})]})},exports.maxWidth=j;
|
|
2
2
|
//# sourceMappingURL=PageLayout.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.cjs.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { useTranslation } from '../../../providers/TranslationProvider';\nimport { getMicroFrontendAttribute } from '../../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('md')]: {\n maxWidth: 'none',\n },\n margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StyledBackButton = styled(IconButton)<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 0, -1.5, -1.5) : theme.spacing(-1.5, 0, -1.5, -1.5),\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('md')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n <Typography variant=\"h5\" component=\"h2\">\n {title}\n </Typography>\n);\n\nexport type Props = {\n actionBtnTitle?: TranslationId;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n strictToParent?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n toParent?: string;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n};\n\nconst PageLayout = (props: Props) => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n strictToParent,\n title,\n titleComponent: TitleComponent,\n toParent,\n navigate,\n } = props;\n const { translate } = useTranslation();\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n const actionButtonLinkFinal = actionButtonWithHttps\n ? actionButtonLink\n : actionButtonLink !== undefined\n ? joinUrlPaths(baseUrl, actionButtonLink)\n : '';\n\n return (\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader ? pageHeader : null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid item container direction=\"row\" alignContent=\"space-between\">\n {toParent && (\n <Grid item>\n <StyledBackButton\n aria-label=\"Back\"\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n component={'button'}\n onClick={() => {\n if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowBackIcon />\n </StyledBackButton>\n </Grid>\n )}\n <StyledHeaderContainer item>{contextButtons && contextButtons.map((button) => <>{button}</>)}</StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer item container>\n <StyledTitleSection item>\n {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n {caption && (\n <StyledCaption variant=\"caption\" component=\"h3\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid item>\n <Button\n variant=\"contained\"\n fullWidth={true}\n data-testid={`Action-button-${actionBtnTitle}`}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n target={openLinkInNewTab ? '_blank' : undefined}\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n >\n {showAddIcon && <Add />}\n {actionBtnTitle && translate(actionBtnTitle)}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n </StyledTitleContainer>\n </StyledHeader>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary identifier={documentTitle}>\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","PageTitle","title","_jsx","variant","component","children","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","strictToParent","titleComponent","TitleComponent","toParent","navigate","translate","useTranslation","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","jsxs","Spacer","size","container","direction","item","alignContent","onClick","history","length","jsx","ArrowBackIcon","map","button","_Fragment","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageLayout.cjs.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('md')]: {\n maxWidth: 'none',\n },\n margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StyledBackButton = styled(IconButton)<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('md')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n <StyledPageTitle variant=\"h5\" component=\"h2\">\n {title}\n </StyledPageTitle>\n);\n\nexport type Props = {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n strictToParent?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n toParent?: string;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n};\n\nconst PageLayout = (props: Props) => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n strictToParent,\n title,\n titleComponent: TitleComponent,\n toParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n } = props;\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n const actionButtonLinkFinal = actionButtonWithHttps\n ? actionButtonLink\n : actionButtonLink !== undefined\n ? joinUrlPaths(baseUrl, actionButtonLink)\n : '';\n\n return (\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader ? pageHeader : null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid item container direction=\"row\" alignContent=\"space-between\">\n <StyledHeaderContainer item>{contextButtons && contextButtons.map((button) => <>{button}</>)}</StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer item container>\n {toParent && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n component={'button'}\n onClick={() => {\n if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowBackIcon />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection item>\n {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n {caption && (\n <StyledCaption variant=\"caption\" component=\"h3\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid item>\n <Button\n variant=\"contained\"\n fullWidth={true}\n data-testid={`Action-button-${actionBtnTitle}`}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n target={openLinkInNewTab ? '_blank' : undefined}\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n >\n {showAddIcon && <Add />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons &&\n customActionButtons.map((button) => (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n </>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary identifier={documentTitle}>\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","strictToParent","titleComponent","TitleComponent","toParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","jsx","Spacer","size","_Fragment","container","direction","item","alignContent","map","button","Fragment","Box","onClick","history","length","ArrowBackIcon","jsxs","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React, { ReactNode, ComponentType } from 'react';
|
|
3
3
|
|
|
4
4
|
type Props = {
|
|
5
|
-
actionBtnTitle?:
|
|
5
|
+
actionBtnTitle?: string;
|
|
6
6
|
caption?: ReactNode;
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
contextButtons?: ReactNode[];
|
|
@@ -21,6 +21,8 @@ type Props = {
|
|
|
21
21
|
toParent?: string;
|
|
22
22
|
openLinkInNewTab?: boolean;
|
|
23
23
|
navigate: (to: any) => void;
|
|
24
|
+
hideDivider?: boolean;
|
|
25
|
+
customActionButtons?: ReactNode[];
|
|
24
26
|
};
|
|
25
27
|
declare const PageLayout: (props: Props) => react_jsx_runtime.JSX.Element;
|
|
26
28
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as i,jsx as t,Fragment as n}from"react/jsx-runtime";import e from"@mui/icons-material/Add";import a from"@mui/icons-material/ArrowBack";import r from"@mui/material/Grid";import o from"@mui/material/IconButton";import{styled as m,useTheme as d}from"@mui/material/styles";import l from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import c from"./DocumentTitle.js";import s from"./FullWidthContainer.js";import
|
|
1
|
+
import{jsxs as i,jsx as t,Fragment as n}from"react/jsx-runtime";import e from"@mui/icons-material/Add";import a from"@mui/icons-material/ArrowBack";import r from"@mui/material/Grid";import o from"@mui/material/IconButton";import{styled as m,useTheme as d}from"@mui/material/styles";import l from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import c from"./DocumentTitle.js";import s from"./FullWidthContainer.js";import h from"../FDErrorBoundary/FDErrorBoundary.js";import g from"@mui/material/Button";import{getMicroFrontendAttribute as u}from"../../../utilities/renderUtilities.js";import{joinUrlPaths as f}from"../../../utilities/validation.js";import v from"../Spacer/Spacer.js";import b from"@mui/material/Box";import x from"@mui/material/Divider";const k=1112,B=m("div")((({theme:i,fluid:t})=>({maxWidth:t?"none":k,[i.breakpoints.down("md")]:{maxWidth:"none"},margin:i.spacing(2,4)}))),w=m(r)((({theme:i})=>({[i.breakpoints.down("sm")]:{width:"100%",paddingTop:i.spacing(2)}}))),y=m(r)((({theme:i})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:i.spacing(3),paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingTop:i.spacing(2),paddingBottom:i.spacing(3)}}))),W=m(r)((({theme:i})=>({paddingTop:i.spacing(2)}))),T=m(r)((()=>({flexGrow:1}))),L=m("div")((({theme:i})=>({maxWidth:k,paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingBottom:i.spacing(2),paddingLeft:i.spacing(2),paddingRight:i.spacing(2)}}))),j=m(o)((({theme:i,hasTitleComponent:t})=>({margin:t?i.spacing(-.75,2,-1.5,-1.5):i.spacing(-1.5,2,-1.5,-1.5),[i.breakpoints.only("sm")]:{marginLeft:i.spacing(-2)},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(-2)}}))),C=m("div")((({theme:i})=>({maxWidth:k,marginLeft:i.spacing(6),marginRight:i.spacing(4),paddingBottom:i.spacing(2),[i.breakpoints.only("md")]:{marginLeft:12,marginRight:i.spacing(3)},[i.breakpoints.only("sm")]:{marginLeft:i.spacing(3),marginRight:i.spacing(3),maxWidth:"none"},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(2),marginRight:i.spacing(2),maxWidth:"none"}}))),A=m(r)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),D=m(l)((()=>({lineHeight:"26px"}))),I=m(l)((()=>({fontWeight:"bold"}))),R=m(x)((({theme:i})=>({marginBottom:i.spacing(4)}))),z=({title:i})=>t(I,{variant:"h5",component:"h2",children:i}),F=o=>{const{actionBtnTitle:m,caption:l,children:x,contextButtons:k,documentTitle:I,fluid:F=!1,fullWidth:G,header:H,hideHeader:E,actionButtonLink:P,openLinkInNewTab:S=!1,pageHeader:_,showActionButton:M,showAddIcon:N,strictToParent:Q,title:U,titleComponent:$,toParent:q,navigate:J,hideDivider:K=!1,customActionButtons:O}=o,V=d(),X=p(V.breakpoints.down("md")),Y=u("data-portal-base-url")||"/",Z=P?.startsWith("https://"),ii=Z?P:void 0!==P?f(Y,P):"";return i(B,{fluid:F,children:[I&&t(c,{children:I}),_||null,i(C,{children:[_&&t(v,{size:16,variant:"vertical"}),!E&&i(n,{children:[i(y,{container:!0,alignItems:"center",direction:"column",children:[t(r,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:t(A,{item:!0,children:k&&k.map((i=>t(n,{children:i})))})}),i(W,{item:!0,container:!0,children:[q&&t(b,{children:t(j,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!$,component:"button",onClick:()=>{q&&Q||q&&history.length<3?J(q):J(-1)},children:t(a,{})})}),i(T,{item:!0,children:[$?t($,{}):t(z,{title:U}),l&&t(D,{variant:"caption",component:"h3",children:l})]}),M&&i(n,{children:[X&&t(v,{size:56,variant:"vertical"}),t(w,{item:!0,children:i(g,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${m}`,href:S||Z?ii:"",target:S?"_blank":void 0,rel:S?"noopener noreferrer":void 0,onClick:S||Z?()=>{}:()=>J(P),children:[N&&t(e,{}),m]})})]}),O&&O.map((e=>i(n,{children:[X&&t(v,{size:56,variant:"vertical"}),!X&&t(v,{size:16,variant:"vertical"}),t(w,{item:!0,children:e})]})))]})]}),!K&&t(R,{})]}),i(s,{fullWidth:G,children:[H?t(L,{children:H}):null,t(h,{identifier:I,children:t(n,{children:x})})]})]})]})};export{z as PageTitle,F as default,k as maxWidth};
|
|
2
2
|
//# sourceMappingURL=PageLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { useTranslation } from '../../../providers/TranslationProvider';\nimport { getMicroFrontendAttribute } from '../../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('md')]: {\n maxWidth: 'none',\n },\n margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StyledBackButton = styled(IconButton)<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 0, -1.5, -1.5) : theme.spacing(-1.5, 0, -1.5, -1.5),\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('md')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n <Typography variant=\"h5\" component=\"h2\">\n {title}\n </Typography>\n);\n\nexport type Props = {\n actionBtnTitle?: TranslationId;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n strictToParent?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n toParent?: string;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n};\n\nconst PageLayout = (props: Props) => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n strictToParent,\n title,\n titleComponent: TitleComponent,\n toParent,\n navigate,\n } = props;\n const { translate } = useTranslation();\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n const actionButtonLinkFinal = actionButtonWithHttps\n ? actionButtonLink\n : actionButtonLink !== undefined\n ? joinUrlPaths(baseUrl, actionButtonLink)\n : '';\n\n return (\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader ? pageHeader : null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid item container direction=\"row\" alignContent=\"space-between\">\n {toParent && (\n <Grid item>\n <StyledBackButton\n aria-label=\"Back\"\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n component={'button'}\n onClick={() => {\n if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowBackIcon />\n </StyledBackButton>\n </Grid>\n )}\n <StyledHeaderContainer item>{contextButtons && contextButtons.map((button) => <>{button}</>)}</StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer item container>\n <StyledTitleSection item>\n {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n {caption && (\n <StyledCaption variant=\"caption\" component=\"h3\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid item>\n <Button\n variant=\"contained\"\n fullWidth={true}\n data-testid={`Action-button-${actionBtnTitle}`}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n target={openLinkInNewTab ? '_blank' : undefined}\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n >\n {showAddIcon && <Add />}\n {actionBtnTitle && translate(actionBtnTitle)}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n </StyledTitleContainer>\n </StyledHeader>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary identifier={documentTitle}>\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","PageTitle","title","_jsx","variant","component","children","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","strictToParent","titleComponent","TitleComponent","toParent","navigate","translate","useTranslation","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","container","direction","item","alignContent","onClick","history","length","ArrowBackIcon","map","button","_Fragment","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageLayout.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('md')]: {\n maxWidth: 'none',\n },\n margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('md')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StyledBackButton = styled(IconButton)<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('md')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('sm')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('xs')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n <StyledPageTitle variant=\"h5\" component=\"h2\">\n {title}\n </StyledPageTitle>\n);\n\nexport type Props = {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n strictToParent?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n toParent?: string;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n};\n\nconst PageLayout = (props: Props) => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n strictToParent,\n title,\n titleComponent: TitleComponent,\n toParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n } = props;\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n const actionButtonLinkFinal = actionButtonWithHttps\n ? actionButtonLink\n : actionButtonLink !== undefined\n ? joinUrlPaths(baseUrl, actionButtonLink)\n : '';\n\n return (\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader ? pageHeader : null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid item container direction=\"row\" alignContent=\"space-between\">\n <StyledHeaderContainer item>{contextButtons && contextButtons.map((button) => <>{button}</>)}</StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer item container>\n {toParent && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n component={'button'}\n onClick={() => {\n if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowBackIcon />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection item>\n {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n {caption && (\n <StyledCaption variant=\"caption\" component=\"h3\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid item>\n <Button\n variant=\"contained\"\n fullWidth={true}\n data-testid={`Action-button-${actionBtnTitle}`}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n target={openLinkInNewTab ? '_blank' : undefined}\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n >\n {showAddIcon && <Add />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons &&\n customActionButtons.map((button) => (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n </>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary identifier={documentTitle}>\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","strictToParent","titleComponent","TitleComponent","toParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","item","alignContent","map","button","Box","onClick","history","length","ArrowBackIcon","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"0wBAwBO,MAAMA,EAAW,KAGlBC,EAAgBC,EAAO,MAAPA,EAAkC,EAAGC,QAAOC,YAAa,CAC3EJ,SAAUI,EAAQ,OAASJ,EAC3B,CAACG,EAAME,YAAYC,KAAK,OAAQ,CAC5BN,SAAU,QAEdO,OAAQJ,EAAMK,QAAQ,EAAG,OAGvBC,EAAyBP,EAAOQ,EAAPR,EAAa,EAAGC,YAAa,CACxD,CAACA,EAAME,YAAYC,KAAK,OAAQ,CAC5BK,MAAO,OACPC,WAAYT,EAAMK,QAAQ,QAI5BK,EAAeX,EAAOQ,EAAPR,EAAa,EAAGC,YAAa,CAC9CW,SAAU,SACVC,WAAY,aACZH,WAAYT,EAAMK,QAAQ,GAC1BQ,cAAeb,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYC,KAAK,OAAQ,CAC5BM,WAAYT,EAAMK,QAAQ,GAC1BQ,cAAeb,EAAMK,QAAQ,QAI/BS,EAAuBf,EAAOQ,EAAPR,EAAa,EAAGC,YAAa,CACtDS,WAAYT,EAAMK,QAAQ,OAGxBU,EAAqBhB,EAAOQ,EAAPR,EAAa,KAAO,CAC3CiB,SAAU,MAGRC,EAAmBlB,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACnDH,WACAgB,cAAeb,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYC,KAAK,OAAQ,CAC5BU,cAAeb,EAAMK,QAAQ,GAC7Ba,YAAalB,EAAMK,QAAQ,GAC3Bc,aAAcnB,EAAMK,QAAQ,QAK9Be,EAAmBrB,EAAOsB,EAAPtB,EAAmE,EAAGC,QAAOsB,wBAAyB,CAC3HlB,OAAQkB,EAAoBtB,EAAMK,SAAS,IAAM,GAAI,KAAM,KAAOL,EAAMK,SAAS,IAAK,GAAI,KAAM,KAEhG,CAACL,EAAME,YAAYqB,KAAK,OAAQ,CAC5BC,WAAYxB,EAAMK,SAAS,IAG/B,CAACL,EAAME,YAAYqB,KAAK,OAAQ,CAC5BC,WAAYxB,EAAMK,SAAS,QAI7BoB,EAAqB1B,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACrDH,WACA2B,WAAYxB,EAAMK,QAAQ,GAC1BqB,YAAa1B,EAAMK,QAAQ,GAC3BQ,cAAeb,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYqB,KAAK,OAAQ,CAC5BC,WAAY,GACZE,YAAa1B,EAAMK,QAAQ,IAG/B,CAACL,EAAME,YAAYqB,KAAK,OAAQ,CAC5BC,WAAYxB,EAAMK,QAAQ,GAC1BqB,YAAa1B,EAAMK,QAAQ,GAC3BR,SAAU,QAGd,CAACG,EAAME,YAAYqB,KAAK,OAAQ,CAC5BC,WAAYxB,EAAMK,QAAQ,GAC1BqB,YAAa1B,EAAMK,QAAQ,GAC3BR,SAAU,YAIZ8B,EAAwB5B,EAAOQ,EAAPR,EAAa,KAAO,CAC9C6B,QAAS,OACTZ,SAAU,EACVa,eAAgB,eAEdC,EAAgB/B,EAAOgC,EAAPhC,EAA0C,KAAO,CACnEiC,WAAY,WAGVC,EAAkBlC,EAAOgC,EAAPhC,EAA0C,KAAO,CACrEmC,WAAY,WAGVC,EAAoBpC,EAAOqC,EAAPrC,EAAgB,EAAGC,YAAa,CACtDqC,aAAcrC,EAAMK,QAAQ,OAGnBiC,EAAY,EAAGC,WACxBC,EAACP,EAAgB,CAAAQ,QAAQ,KAAKC,UAAU,KACnCC,SAAAJ,IA6BHK,EAAcC,IAChB,MAAMC,eACFA,EAAcC,QACdA,EAAOJ,SACPA,EAAQK,eACRA,EAAcC,cACdA,EAAahD,MACbA,GAAQ,EAAKiD,UACbA,EAASC,OACTA,EAAMC,WACNA,EAAUC,iBACVA,EAAgBC,iBAChBA,GAAmB,EAAKC,WACxBA,EAAUC,iBACVA,EAAgBC,YAChBA,EAAWC,eACXA,EAAcnB,MACdA,EACAoB,eAAgBC,EAAcC,SAC9BA,EAAQC,SACRA,EAAQC,YACRA,GAAc,EAAKC,oBACnBA,GACAnB,EACE7C,EAAQiE,IACRC,EAAWC,EAAcnE,EAAME,YAAYC,KAAK,OAChDiE,EAAUC,EAA0B,yBAA2B,IAC/DC,EAAwBjB,GAAkBkB,WAAW,YACrDC,GAAwBF,EACxBjB,OACqBoB,IAArBpB,EACEqB,EAAaN,EAASf,GACtB,GAER,OACIsB,EAAC7E,EAAa,CAACG,MAAOA,EAAK0C,SAAA,CACtBM,GAAiBT,EAACoC,YAAe3B,IAEjCM,GAA0B,KAC3BoB,EAAClD,EAAkB,CAAAkB,SAAA,CACdY,GAAcf,EAACqC,EAAM,CAACC,KAAM,GAAIrC,QAAQ,cACvCW,GACEuB,EACII,EAAA,CAAApC,SAAA,CAAAgC,EAACjE,EAAY,CAACsE,WAAS,EAACpE,WAAW,SAASqE,UAAU,SAAQtC,SAAA,CAC1DH,EAACjC,GAAK2E,MAAI,EAACF,WAAS,EAACC,UAAU,MAAME,aAAa,gBAAexC,SAC7DH,EAACb,EAAsB,CAAAuD,iBAAMlC,GAAkBA,EAAeoC,KAAKC,GAAW7C,EAAAuC,EAAA,CAAApC,SAAG0C,UAErFV,EAAC7D,EAAoB,CAACoE,MAAI,EAACF,WAAS,EAAArC,SAAA,CAC/BkB,GACGrB,EAAC8C,EAAG,CAAA3C,SACAH,EAACpB,gBACc,OAAM,cACL,cACZE,oBAAqBsC,EACrBlB,UAAW,SACX6C,QAAS,KACD1B,GAAYH,GAELG,GAAY2B,QAAQC,OA/LtD,EA8L2B3B,EAASD,GAITC,GAAU,EACb,WAGLtB,EAACkD,EAAgB,QAK7Bf,EAAC5D,GAAmBmE,MAAI,EAAAvC,SAAA,CACnBiB,EAAiBpB,EAACoB,EAAc,CAAA,GAAMpB,EAACF,GAAUC,MAAOA,IACxDQ,GACGP,EAACV,GAAcW,QAAQ,UAAUC,UAAU,KACtCC,SAAAI,OAKZS,GACGmB,EAAAI,EAAA,CAAApC,SAAA,CACKuB,GAAY1B,EAACqC,EAAO,CAAAC,KAAM,GAAIrC,QAAQ,aACvCD,EAAClC,EAAuB,CAAA4E,iBACpBP,EAACgB,GACGlD,QAAQ,YACRS,WAAW,gBACE,iBAAiBJ,IAC9B8C,KAAMtC,GAAoBgB,EAAwBE,GAAwB,GAC1EqB,OAAQvC,EAAmB,cAAWmB,EACtCqB,IAAKxC,EAAmB,2BAAwBmB,EAChDc,QAAUjC,GAAqBgB,EAA2D,OAAnC,IAAMR,EAAST,GAA4BV,SAAA,CAEjGc,GAAejB,EAACuD,EAAG,CAAA,GACnBjD,UAKhBkB,GACGA,EAAoBoB,KAAKC,GACrBV,EAAAI,EAAA,CAAApC,SAAA,CACKuB,GAAY1B,EAACqC,EAAO,CAAAC,KAAM,GAAIrC,QAAQ,cACrCyB,GAAY1B,EAACqC,GAAOC,KAAM,GAAIrC,QAAQ,aACxCD,EAAClC,GAAuB4E,MAAI,EAAAvC,SAAE0C,gBAKhDtB,GAAevB,EAACL,SAG1BwC,EAACqB,GAAmB9C,UAAWA,EAC1BP,SAAA,CAAAQ,EAASX,EAACvB,EAAkB,CAAA0B,SAAAQ,IAA6B,KAC1DX,EAACyD,EAAgB,CAAAC,WAAYjD,EAAaN,SACtCH,cAAGG,cAKrB"}
|