@pega/react-sdk-components 24.2.11 → 25.1.10

package/lib/theme.js

@@ -1,7 +1,96 @@
+// @ts-nocheck
 import { createTheme } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createTheme({
+import sdkConfig from '../../../sdk-config.json';
+const lightThemeColours = {
+    ':root': {
+        '--app-primary-color': '#007bff' /* was #673ab7; */,
+        '--app-primary-dark-color': '#0048cc' /* was #4527A0; */,
+        '--app-primary-light-color': '#33aeff' /* was #B499FC; */,
+        '--app-secondary-color': '#FFC400',
+        '--app-neutral-color': 'grey',
+        '--app-neutral-light-color': 'lightgrey',
+        '--app-neutral-dark-color': '#262626',
+        '--app-error-color': '#f44336',
+        '--app-error-light-color': '#e57373',
+        '--app-error-dark-color': '#d32f2f',
+        '--app-warning-color': '#ff9800',
+        '--app-warning-color-light': '#ffb74d',
+        '--app-warning-color-dark': '#f57c00',
+        '--app-background-color': 'whitesmoke',
+        '--app-form-bg-color': 'white',
+        /* App Navigation */
+        '--app-nav-bg': '#262626' /*! default */,
+        '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,
+        /* Few custom colors */
+        '--modal-background-color': 'rgba(100, 100, 100, 0.4)',
+        '--modal-top-color': 'white',
+        '--modal-border-color': 'black',
+        '--modal-box-shadow-color': '#777',
+        '--utility-count-background-color': '#65b5f5',
+        '--utility-card-border-color': '#f5f5f5',
+        '--link-button-color': '#3f51b5',
+        '--banner-text-color': 'rgb(0, 0, 0)',
+        '--app-text-color': 'white',
+        '--utility-background-color': 'white',
+        '--table-header-background': '#f5f5f5',
+        '--step-line-color': 'rgba(0, 0, 0, 0.12)',
+        '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
+        '--step-label-color': 'rgba(0, 0, 0, 0.54)',
+        '--svg-color': 'invert(0%)',
+        '--secondary-button-text-color': '#ffffff',
+        '--text-primary-color': '#000',
+        '--text-secondary-color': '#c0c0c0',
+        '--stepper-completed-bg-color': '#218721'
+    }
+};
+const darkThemeColours = {
+    ':root': {
+        '--app-primary-color': '#C70BB5' /* accent pink */,
+        '--app-primary-dark-color': '#c2185b' /* darker pink */,
+        '--app-primary-light-color': '#ff5ca2' /* lighter pink */,
+        '--app-secondary-color': '#c0c0c0' /* accent silver */,
+        '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */,
+        '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */,
+        '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */,
+        '--app-error-color': '#ff5370' /* vibrant error red */,
+        '--app-error-light-color': '#ffb4b4' /* soft error red */,
+        '--app-error-dark-color': '#b71c1c' /* deep error red */,
+        '--app-warning-color': '#ffb300' /* amber warning */,
+        '--app-warning-color-light': '#ffe082' /* light amber */,
+        '--app-warning-color-dark': '#c68400' /* dark amber */,
+        '--app-background-color': '#060326' /* main dark background */,
+        '--app-form-bg-color': '#23273f' /* slightly lighter for forms */,
+        /* App Navigation */
+        '--app-nav-bg': '#18132c' /* navigation background */,
+        '--app-nav-color': '#c0c0c0',
+        '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */,
+        '--modal-top-color': '#2a1f54' /* light pink accent for modal top */,
+        '--modal-border-color': '#2a1f54' /* matches card background */,
+        '--modal-box-shadow-color': '#777',
+        '--utility-count-background-color': '#f8aaf0',
+        '--utility-card-border-color': '#2a1f54',
+        '--link-button-color': '#f72585',
+        '--banner-text-color': '#e0e0e0',
+        '--app-text-color': '#e0e0e0',
+        '--utility-background-color': '#2a1f54',
+        '--table-header-background': '#18132c',
+        '--step-line-color': 'rgba(0, 0, 0, 0.12)',
+        '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
+        '--step-label-color': 'rgba(0, 0, 0, 0.54)',
+        '--svg-color': 'invert(100%)',
+        '--secondary-button-text-color': '#1a103c',
+        '--text-primary-color': '#e0e0e0',
+        '--text-secondary-color': '#c0c0c0',
+        '--stepper-completed-bg-color': '#158715'
+    }
+};
+const lightTheme = createTheme({
     components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                ...lightThemeColours
+            }
+        },
         MuiTextField: {
             defaultProps: {
                 size: 'small'
@@ -13,6 +102,35 @@ export const theme = createTheme({
             }
         }
     },
+    headerNav: {
+        backgroundColor: '#ffffff',
+        navLinkColor: 'rgba(0, 0, 0, 0.87)',
+        navLinkHoverColor: '#3f51b5',
+        menuToggleColor: 'rgba(0, 0, 0, 0.87)'
+    },
+    actionButtons: {
+        primary: {
+            backgroundColor: '#cc0f60',
+            color: '#FFFFFF'
+        },
+        secondary: {
+            backgroundColor: '#3F51B5',
+            color: '#FFFFFF'
+        }
+    },
+    modal: {
+        backgroundColor: 'rgba(100, 100, 100, 0.4)',
+        topColor: 'white'
+    },
+    embedded: {
+        resolutionTextColor: 'darkslategray'
+    },
+    backgroundColor: '#fff',
+    card: {
+        backgroundColor: '#fff',
+        borderLeft: '6px solid',
+        borderLeftColor: '#C70BB5'
+    },
     palette: {
         primary: {
             contrastText: '#fff',
@@ -25,7 +143,96 @@ export const theme = createTheme({
             dark: '#c51162',
             light: '#ff4081',
             main: '#f50057'
+        },
+        backgroundColor: '#fff'
+    }
+});
+const darkTheme = createTheme({
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',
+                    backgroundAttachment: 'fixed'
+                },
+                ...darkThemeColours,
+                // scrollbar styling
+                '*': {
+                    scrollbarWidth: 'thin', // Options: auto | thin | none
+                    scrollbarColor: '#555 #2c2c2c' // thumb color, track color
+                }
+            }
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {}
+            }
+        },
+        MuiTextField: {
+            defaultProps: {
+                size: 'small'
+            },
+            styleOverrides: {
+                root: {
+                    width: '100%'
+                }
+            }
         }
+    },
+    headerNav: {
+        backgroundColor: 'var(--app-nav-bg)',
+        navLinkColor: 'var(--app-nav-color)',
+        navLinkHoverColor: '#ffffff',
+        menuToggleColor: '#ffffff'
+    },
+    actionButtons: {
+        primary: {
+            backgroundColor: '#C70BB5',
+            color: '#FFFFFF'
+        },
+        secondary: {
+            backgroundColor: '#FFFFFF',
+            color: '#C70BB5'
+        }
+    },
+    embedded: {
+        resolutionTextColor: 'darkslategray'
+    },
+    backgroundColor: '#060326',
+    card: {
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        borderLeft: '',
+        borderLeftColor: ''
+    },
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#C70BB5', // pink
+            light: '#C70BB5', // pink
+            dark: '#c2185b', // darker shade
+            contrastText: '#ffffff' // white text on pink buttons
+        },
+        secondary: {
+            main: '#c0c0c0', // accent silver
+            light: '#d9d9d9',
+            dark: '#8c8c8c',
+            contrastText: '#1a103c' // dark text on silver background
+        },
+        info: {
+            main: '#e91e63', // Pink
+            dark: '#E885D2', // Light pink
+            light: '#C70BB5', // Lighter pink for backgrounds
+            contrastText: '#fff'
+        },
+        background: {
+            paper: '#191b2c' // card-bg
+        },
+        text: {
+            primary: '#e0e0e0', // text-light
+            secondary: '#c0c0c0' // silver for muted text
+        },
+        divider: 'rgba(255, 255, 255, 0.1)' // border-color
     }
 });
+export const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;
 //# sourceMappingURL=theme.js.map

package/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAW5C,wDAAwD;AACxD,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC;IAC/B,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,YAAY,EAAE;gBACZ,IAAI,EAAE,OAAO;aACd;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,KAAK,EAAE,MAAM;iBACd;aACF;SACF;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,YAAY,EAAE,MAAM;YACpB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;QACD,SAAS,EAAE;YACT,YAAY,EAAE,MAAM;YACpB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC,CAAC","sourcesContent":["import { createTheme } from '@mui/material';\nimport { Theme } from '@mui/material/styles';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {}\n}\n\n// eslint-disable-next-line import/prefer-default-export\nexport const theme = createTheme({\n  components: {\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    }\n  }\n});\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { createTheme } from '@mui/material';\nimport type { Theme } from '@mui/material/styles';\n\nimport sdkConfig from '../../../sdk-config.json';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {\n    backgroundColor: string;\n    card: {\n      backgroundColor: string;\n      borderLeft: string;\n      borderLeftColor: string;\n    };\n    modal: {\n      backgroundColor: string;\n      topColor: string;\n    };\n    headerNav: {\n      backgroundColor: string;\n      navLinkColor: string;\n      navLinkHoverColor: string;\n      menuToggleColor: string;\n    };\n    embedded: {\n      resolutionTextColor: string;\n    };\n    actionButtons: {\n      primary: {\n        backgroundColor: string;\n        color: string;\n      };\n      secondary: {\n        backgroundColor: string;\n        color: string;\n      };\n    };\n  }\n}\n\nconst lightThemeColours = {\n  ':root': {\n    '--app-primary-color': '#007bff' /* was #673ab7; */,\n    '--app-primary-dark-color': '#0048cc' /* was #4527A0; */,\n    '--app-primary-light-color': '#33aeff' /* was #B499FC; */,\n    '--app-secondary-color': '#FFC400',\n    '--app-neutral-color': 'grey',\n    '--app-neutral-light-color': 'lightgrey',\n    '--app-neutral-dark-color': '#262626',\n    '--app-error-color': '#f44336',\n    '--app-error-light-color': '#e57373',\n    '--app-error-dark-color': '#d32f2f',\n    '--app-warning-color': '#ff9800',\n    '--app-warning-color-light': '#ffb74d',\n    '--app-warning-color-dark': '#f57c00',\n\n    '--app-background-color': 'whitesmoke',\n    '--app-form-bg-color': 'white',\n\n    /* App Navigation */\n    '--app-nav-bg': '#262626' /*! default */,\n    '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,\n\n    /* Few custom colors */\n    '--modal-background-color': 'rgba(100, 100, 100, 0.4)',\n    '--modal-top-color': 'white',\n    '--modal-border-color': 'black',\n    '--modal-box-shadow-color': '#777',\n    '--utility-count-background-color': '#65b5f5',\n    '--utility-card-border-color': '#f5f5f5',\n    '--link-button-color': '#3f51b5',\n    '--banner-text-color': 'rgb(0, 0, 0)',\n    '--app-text-color': 'white',\n    '--utility-background-color': 'white',\n    '--table-header-background': '#f5f5f5',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(0%)',\n    '--secondary-button-text-color': '#ffffff',\n\n    '--text-primary-color': '#000',\n    '--text-secondary-color': '#c0c0c0',\n    '--stepper-completed-bg-color': '#218721'\n  }\n};\nconst darkThemeColours = {\n  ':root': {\n    '--app-primary-color': '#C70BB5' /* accent pink */,\n    '--app-primary-dark-color': '#c2185b' /* darker pink */,\n    '--app-primary-light-color': '#ff5ca2' /* lighter pink */,\n    '--app-secondary-color': '#c0c0c0' /* accent silver */,\n    '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */,\n    '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */,\n    '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */,\n    '--app-error-color': '#ff5370' /* vibrant error red */,\n    '--app-error-light-color': '#ffb4b4' /* soft error red */,\n    '--app-error-dark-color': '#b71c1c' /* deep error red */,\n    '--app-warning-color': '#ffb300' /* amber warning */,\n    '--app-warning-color-light': '#ffe082' /* light amber */,\n    '--app-warning-color-dark': '#c68400' /* dark amber */,\n\n    '--app-background-color': '#060326' /* main dark background */,\n    '--app-form-bg-color': '#23273f' /* slightly lighter for forms */,\n\n    /* App Navigation */\n    '--app-nav-bg': '#18132c' /* navigation background */,\n    '--app-nav-color': '#c0c0c0',\n\n    '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */,\n    '--modal-top-color': '#2a1f54' /* light pink accent for modal top */,\n    '--modal-border-color': '#2a1f54' /* matches card background */,\n    '--modal-box-shadow-color': '#777',\n\n    '--utility-count-background-color': '#f8aaf0',\n    '--utility-card-border-color': '#2a1f54',\n    '--link-button-color': '#f72585',\n    '--banner-text-color': '#e0e0e0',\n    '--app-text-color': '#e0e0e0',\n    '--utility-background-color': '#2a1f54',\n    '--table-header-background': '#18132c',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(100%)',\n    '--secondary-button-text-color': '#1a103c',\n\n    '--text-primary-color': '#e0e0e0',\n    '--text-secondary-color': '#c0c0c0',\n    '--stepper-completed-bg-color': '#158715'\n  }\n};\n\nconst lightTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        ...lightThemeColours\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  headerNav: {\n    backgroundColor: '#ffffff',\n    navLinkColor: 'rgba(0, 0, 0, 0.87)',\n    navLinkHoverColor: '#3f51b5',\n    menuToggleColor: 'rgba(0, 0, 0, 0.87)'\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#cc0f60',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#3F51B5',\n      color: '#FFFFFF'\n    }\n  },\n  modal: {\n    backgroundColor: 'rgba(100, 100, 100, 0.4)',\n    topColor: 'white'\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#fff',\n  card: {\n    backgroundColor: '#fff',\n    borderLeft: '6px solid',\n    borderLeftColor: '#C70BB5'\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    },\n    backgroundColor: '#fff'\n  }\n});\n\nconst darkTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n          backgroundAttachment: 'fixed'\n        },\n        ...darkThemeColours,\n\n        // scrollbar styling\n        '*': {\n          scrollbarWidth: 'thin', // Options: auto | thin | none\n          scrollbarColor: '#555 #2c2c2c' // thumb color, track color\n        }\n      }\n    },\n    MuiPaper: {\n      styleOverrides: {\n        root: {}\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  headerNav: {\n    backgroundColor: 'var(--app-nav-bg)',\n    navLinkColor: 'var(--app-nav-color)',\n    navLinkHoverColor: '#ffffff',\n    menuToggleColor: '#ffffff'\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#C70BB5',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#FFFFFF',\n      color: '#C70BB5'\n    }\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#060326',\n  card: {\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    borderLeft: '',\n    borderLeftColor: ''\n  },\n  palette: {\n    mode: 'dark',\n    primary: {\n      main: '#C70BB5', // pink\n      light: '#C70BB5', // pink\n      dark: '#c2185b', // darker shade\n      contrastText: '#ffffff' // white text on pink buttons\n    },\n    secondary: {\n      main: '#c0c0c0', // accent silver\n      light: '#d9d9d9',\n      dark: '#8c8c8c',\n      contrastText: '#1a103c' // dark text on silver background\n    },\n    info: {\n      main: '#e91e63', // Pink\n      dark: '#E885D2', // Light pink\n      light: '#C70BB5', // Lighter pink for backgrounds\n      contrastText: '#fff'\n    },\n    background: {\n      paper: '#191b2c' // card-bg\n    },\n    text: {\n      primary: '#e0e0e0', // text-light\n      secondary: '#c0c0c0' // silver for muted text\n    },\n    divider: 'rgba(255, 255, 255, 0.1)' // border-color\n  }\n});\n\nexport const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;\n"]}

package/lib/types/PConnProps.d.ts

@@ -5,7 +5,7 @@
 //  that returns a PConnect object. (new/better way of doing .propTypes).
 //  This PConnProps can be extended to include other props that we know are in every component
 export interface PConnProps {
-  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  // getPConnect should exist for every C11n component. (add @ts-expect-error in special cases where it isn't)
   getPConnect: () => typeof PConnect;
 
   // Allow any/all other key/value pairs in the BaseProps for now

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "24.2.11",
+  "version": "25.1.10",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [
@@ -12,6 +12,37 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/lab": "^6.0.1-beta.36",
+    "@mui/material": "^6.5.0",
+    "@mui/styles": "^6.5.0",
+    "@mui/x-date-pickers": "^7.29.4",
+    "@react-google-maps/api": "^2.20.7",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "downloadjs": "^1.4.7",
+    "fast-deep-equal": "^3.1.3",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.difference": "^4.5.0",
+    "mui-tel-input": "^8.0.1",
+    "react-datepicker": "^7.6.0",
+    "react-number-format": "^5.4.4",
+    "react-redux": "^8.1.3",
+    "throttle-debounce": "^5.0.2"
+  },
+  "devDependencies": {
+    "@pega/pcore-pconnect-typedefs": "~3.2.2",
+    "tinymce": "^6.8.6"
+  },
+  "peerDependencies": {
+    "@pega/auth": "~0.2",
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
+  },
   "author": "Pegasystems",
   "license": "SEE LICENCE IN LICENSE"
 }

package/lib/components/helpers/attachmentHelpers.d.ts

@@ -1,13 +0,0 @@
-export declare const validateMaxSize: (fileObj: any, maxSizeInMB: string) => boolean;
-export declare const fileDownload: (data: any, fileName: any, ext: any) => void;
-export declare const getIconFromFileType: (fileType: any) => string;
-export declare const getIconForAttachment: (inThis: any, attachment: any) => string;
-export declare const buildFilePropsFromResponse: (respObj: any) => {
-    props: {
-        meta: string;
-        name: string;
-        icon: string;
-    };
-    responseProps: any;
-};
-//# sourceMappingURL=attachmentHelpers.d.ts.map

package/lib/components/helpers/attachmentHelpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"attachmentHelpers.d.ts","sourceRoot":"","sources":["../../../src/components/helpers/attachmentHelpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,YAAa,GAAG,eAAe,MAAM,KAAG,OAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,8CAQxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,qBAAe,MAyB9C,CAAC;AAEF,eAAO,MAAM,oBAAoB,WAAY,GAAG,cAAc,GAAG,KAAG,MAanE,CAAC;AAEF,eAAO,MAAM,0BAA0B,oBAEpC;IACD,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,aAAa,EAAE,GAAG,CAAC;CAYpB,CAAC"}

package/lib/components/helpers/attachmentHelpers.js

@@ -1,72 +0,0 @@
-import download from 'downloadjs';
-export const validateMaxSize = (fileObj, maxSizeInMB) => {
-    const fileSize = (fileObj.size / 1048576).toFixed(2);
-    return parseFloat(fileSize) < parseFloat(maxSizeInMB);
-};
-export const fileDownload = (data, fileName, ext) => {
-    const name = ext ? `${fileName}.${ext}` : fileName;
-    // Temp fix: downloading EMAIl type attachment as html file
-    if (ext === 'html') {
-        download(data, name, 'text/html');
-    }
-    else {
-        download(atob(data), name);
-    }
-};
-export const getIconFromFileType = (fileType) => {
-    let icon = 'document-doc';
-    if (!fileType)
-        return icon;
-    if (fileType.startsWith('audio')) {
-        icon = 'audio';
-    }
-    else if (fileType.startsWith('video')) {
-        icon = 'video';
-    }
-    else if (fileType.startsWith('image')) {
-        icon = 'picture';
-    }
-    else if (fileType.includes('pdf')) {
-        icon = 'document-pdf';
-    }
-    else {
-        const [, subtype] = fileType.split('/');
-        const foundMatch = sources => {
-            return sources.some(key => subtype.includes(key));
-        };
-        if (foundMatch(['excel', 'spreadsheet'])) {
-            icon = 'document-xls';
-        }
-        else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
-            icon = 'document-compress';
-        }
-    }
-    return icon;
-};
-export const getIconForAttachment = (inThis, attachment) => {
-    let icon;
-    switch (attachment.type) {
-        case 'FILE':
-            icon = inThis.getIconFromFileType(attachment.mimeType);
-            break;
-        case 'URL':
-            icon = 'chain';
-            break;
-        default:
-            icon = 'document-doc';
-    }
-    return icon;
-};
-export const buildFilePropsFromResponse = (respObj) => {
-    return {
-        props: {
-            meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,
-            name: respObj.pyAttachName,
-            icon: getIconFromFileType(respObj.pyMimeFileExtension)
-        },
-        responseProps: {
-            ...respObj
-        }
-    };
-};
-//# sourceMappingURL=attachmentHelpers.js.map

package/lib/components/helpers/attachmentHelpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"attachmentHelpers.js","sourceRoot":"","sources":["../../../src/components/helpers/attachmentHelpers.ts"],"names":[],"mappings":"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","sourcesContent":["import download from 'downloadjs';\n\nexport const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {\n  const fileSize = (fileObj.size / 1048576).toFixed(2);\n  return parseFloat(fileSize) < parseFloat(maxSizeInMB);\n};\n\nexport const fileDownload = (data, fileName, ext) => {\n  const name = ext ? `${fileName}.${ext}` : fileName;\n  // Temp fix: downloading EMAIl type attachment as html file\n  if (ext === 'html') {\n    download(data, name, 'text/html');\n  } else {\n    download(atob(data), name);\n  }\n};\n\nexport const getIconFromFileType = (fileType): string => {\n  let icon = 'document-doc';\n  if (!fileType) return icon;\n  if (fileType.startsWith('audio')) {\n    icon = 'audio';\n  } else if (fileType.startsWith('video')) {\n    icon = 'video';\n  } else if (fileType.startsWith('image')) {\n    icon = 'picture';\n  } else if (fileType.includes('pdf')) {\n    icon = 'document-pdf';\n  } else {\n    const [, subtype] = fileType.split('/');\n    const foundMatch = sources => {\n      return sources.some(key => subtype.includes(key));\n    };\n\n    if (foundMatch(['excel', 'spreadsheet'])) {\n      icon = 'document-xls';\n    } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {\n      icon = 'document-compress';\n    }\n  }\n\n  return icon;\n};\n\nexport const getIconForAttachment = (inThis: any, attachment: any): string => {\n  let icon;\n  switch (attachment.type) {\n    case 'FILE':\n      icon = inThis.getIconFromFileType(attachment.mimeType);\n      break;\n    case 'URL':\n      icon = 'chain';\n      break;\n    default:\n      icon = 'document-doc';\n  }\n  return icon;\n};\n\nexport const buildFilePropsFromResponse = (\n  respObj\n): {\n  props: { meta: string; name: string; icon: string };\n  responseProps: any;\n} => {\n  return {\n    props: {\n      meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,\n      name: respObj.pyAttachName,\n      icon: getIconFromFileType(respObj.pyMimeFileExtension)\n    },\n    responseProps: {\n      ...respObj\n    }\n  };\n};\n"]}