@xelto.npm/xc2-lib 0.0.49 → 0.0.50

package/dist/cjs/types/components/index.d.ts

@@ -14,3 +14,5 @@ export { default as Select } from "./Inputs/select";
 export { default as MultiSelect } from "./Inputs/multiselect";
 export { default as TableMobile } from "./tableMobile";
 export { default as SearchBar } from "./searchBar";
+export { default as Modal } from "./modal";
+export { default as ModuleTile } from "./moduleTile";

package/dist/cjs/types/components/modal/ModalComponent.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ModalProps } from "./ModalProps";
+declare const CustomModal: React.FunctionComponent<ModalProps>;
+export default CustomModal;

package/dist/cjs/types/components/modal/ModalProps.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEventHandler } from "react";
+export interface ModalProps {
+    actionButtonLabel?: string;
+    bottomButtonLabel?: string;
+    closeButtonLabel?: string;
+    description?: string;
+    title?: string;
+    type?: string;
+    handleCloseModal?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    handleActionButton?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    isModalOpen?: boolean;
+}

package/dist/cjs/types/components/modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ModalComponent';

package/dist/cjs/types/components/moduleTile/ModuleTileComponent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModuleTileProps } from "./ModuleTileProps";
+declare const ModuleTile: React.FunctionComponent<ModuleTileProps>;
+export default ModuleTile;

package/dist/cjs/types/components/moduleTile/ModuleTileProps.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventHandler } from "react";
+export interface ModuleTileProps {
+    fluid?: boolean;
+    illustrationName?: string;
+    header?: string;
+    onClick?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+}

package/dist/cjs/types/components/moduleTile/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ModuleTileComponent';

package/dist/esm/index.js

@@ -36339,11 +36339,10 @@ process.env.NODE_ENV !== "production" ? Checkbox$1.propTypes /* remove-proptypes
    */
   value: propTypes.exports.any
 } : void 0;
-var Checkbox$2 = Checkbox$1;
 
 var Checkbox = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: Checkbox$2,
+	default: Checkbox$1,
 	checkboxClasses: checkboxClasses,
 	getCheckboxUtilityClass: getCheckboxUtilityClass
 });
@@ -36459,10 +36458,11 @@ process.env.NODE_ENV !== "production" ? FormGroup$1.propTypes /* remove-proptype
    */
   sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object])
 } : void 0;
+var FormGroup$2 = FormGroup$1;
 
 var FormGroup = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: FormGroup$1,
+	default: FormGroup$2,
 	formGroupClasses: formGroupClasses,
 	getFormGroupUtilityClass: getFormGroupUtilityClass
 });
@@ -37041,7 +37041,7 @@ var StyledFormControlLabel = styled(FormControlLabel$1)(function (_a) { return (
         }
     }
 }); });
-var StyledCheckbox$1 = styled(Checkbox$2)(function () {
+var StyledCheckbox$1 = styled(Checkbox$1)(function () {
     return ({
         'svg': {
             width: 20,
@@ -37111,7 +37111,7 @@ var StyledCheckbox$1 = styled(Checkbox$2)(function () {
 });
 var CheckboxComponent = function (_a) {
     var disabled = _a.disabled, label = _a.label, checked = _a.checked, onChange = _a.onChange, indeterminate = _a.indeterminate, forwardedRef = _a.forwardedRef, props = __rest$1(_a, ["disabled", "label", "checked", "onChange", "indeterminate", "forwardedRef"]);
-    return (jsxRuntime.exports.jsx(FormGroup$1, { children: jsxRuntime.exports.jsx(StyledFormControlLabel, __assign({}, props, { ref: forwardedRef, classes: { disabled: 'disabled' }, control: jsxRuntime.exports.jsx(StyledCheckbox$1, { indeterminate: indeterminate, checked: checked, onChange: onChange, disabled: disabled, classes: { disabled: 'disabled' }, icon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_default", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), checkedIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_checked", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), indeterminateIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_indeterminate", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }) }), label: label })) }));
+    return (jsxRuntime.exports.jsx(FormGroup$2, { children: jsxRuntime.exports.jsx(StyledFormControlLabel, __assign({}, props, { ref: forwardedRef, classes: { disabled: 'disabled' }, control: jsxRuntime.exports.jsx(StyledCheckbox$1, { indeterminate: indeterminate, checked: checked, onChange: onChange, disabled: disabled, classes: { disabled: 'disabled' }, icon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_default", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), checkedIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_checked", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), indeterminateIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_indeterminate", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }) }), label: label })) }));
 };
 
 function GlobalStyles$2(props) {
@@ -40355,11 +40355,10 @@ process.env.NODE_ENV !== "production" ? Paper$1.propTypes /* remove-proptypes */
    */
   variant: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['elevation', 'outlined']), propTypes.exports.string])
 } : void 0;
-var Paper$2 = Paper$1;
 
 var Paper = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: Paper$2,
+	default: Paper$1,
 	paperClasses: paperClasses,
 	getPaperUtilityClass: getPaperUtilityClass
 });
@@ -41334,7 +41333,7 @@ const PopoverRoot = styled(Modal, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const PopoverPaper = styled(Paper$2, {
+const PopoverPaper = styled(Paper$1, {
   name: 'MuiPopover',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -41779,7 +41778,7 @@ const MenuRoot = styled(Popover$2, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = styled(Paper$2, {
+const MenuPaper = styled(Paper$1, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -53192,7 +53191,7 @@ const useUtilityClasses$1D = ownerState => {
   };
   return composeClasses(slots, getAccordionUtilityClass, classes);
 };
-const AccordionRoot = styled(Paper$2, {
+const AccordionRoot = styled(Paper$1, {
   name: 'MuiAccordion',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -53991,7 +53990,7 @@ const useUtilityClasses$1y = ownerState => {
   };
   return composeClasses(slots, getAlertUtilityClass, classes);
 };
-const AlertRoot = styled(Paper$2, {
+const AlertRoot = styled(Paper$1, {
   name: 'MuiAlert',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -54369,7 +54368,7 @@ const useUtilityClasses$1w = ownerState => {
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
 const joinVars = (var1, var2) => `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})`;
-const AppBarRoot = styled(Paper$2, {
+const AppBarRoot = styled(Paper$1, {
   name: 'MuiAppBar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -55536,7 +55535,7 @@ const AutocompletePopper = styled(Popper, {
 }, ownerState.disablePortal && {
   position: 'absolute'
 }));
-const AutocompletePaper = styled(Paper$2, {
+const AutocompletePaper = styled(Paper$1, {
   name: 'MuiAutocomplete',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -55694,7 +55693,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       noOptionsText = 'No options',
       openOnFocus = false,
       openText = 'Open',
-      PaperComponent = Paper$2,
+      PaperComponent = Paper$1,
       PopperComponent = Popper,
       popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntime.exports.jsx(ArrowDropDownIcon, {})),
       readOnly = false,
@@ -57911,7 +57910,7 @@ const useUtilityClasses$1l = ownerState => {
   };
   return composeClasses(slots, getCardUtilityClass, classes);
 };
-const CardRoot = styled(Paper$2, {
+const CardRoot = styled(Paper$1, {
   name: 'MuiCard',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -58983,7 +58982,7 @@ const DialogContainer = styled('div', {
     width: '0'
   }
 }));
-const DialogPaper = styled(Paper$2, {
+const DialogPaper = styled(Paper$1, {
   name: 'MuiDialog',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
@@ -59070,7 +59069,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       onBackdropClick,
       onClose,
       open,
-      PaperComponent = Paper$2,
+      PaperComponent = Paper$1,
       PaperProps = {},
       scroll = 'paper',
       TransitionComponent = Fade,
@@ -60197,7 +60196,7 @@ const DrawerDockedRoot = styled('div', {
 })({
   flex: '0 0 auto'
 });
-const DrawerPaper = styled(Paper$2, {
+const DrawerPaper = styled(Paper$1, {
   name: 'MuiDrawer',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
@@ -64383,7 +64382,7 @@ const useUtilityClasses$T = ownerState => {
   };
   return composeClasses(slots, getMobileStepperUtilityClass, classes);
 };
-const MobileStepperRoot = styled(Paper$2, {
+const MobileStepperRoot = styled(Paper$1, {
   name: 'MuiMobileStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -65709,7 +65708,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/jsxRuntime.exports.jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.exports.jsx(FormGroup$1, _extends$1c({
+    children: /*#__PURE__*/jsxRuntime.exports.jsx(FormGroup$2, _extends$1c({
       role: "radiogroup",
       ref: handleRef
     }, other, {
@@ -67469,7 +67468,7 @@ const useUtilityClasses$L = ownerState => {
   };
   return composeClasses(slots, getSnackbarContentUtilityClass, classes);
 };
-const SnackbarContentRoot = styled(Paper$2, {
+const SnackbarContentRoot = styled(Paper$1, {
   name: 'MuiSnackbarContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -75587,7 +75586,7 @@ const PickersPopperRoot = styled(Popper, {
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = styled(Paper$2, {
+const PickersPopperPaper = styled(Paper$1, {
   name: 'MuiPickersPopper',
   slot: 'Paper',
   overridesResolver: (_, styles) => styles.paper
@@ -82557,7 +82556,7 @@ var StyledWrapper = styled('div', {
         },
     });
 });
-var StyledPaper$1 = styled(Paper$2)(function (_a) { return ({
+var StyledPaper$1 = styled(Paper$1)(function (_a) { return ({
     border: '2px solid #293072',
     borderRadius: '7px !important',
     translate: '0 -1.5px',
@@ -82731,7 +82730,7 @@ var StyledAutocomplete = styled(Autocomplete, {
         },
     });
 });
-var StyledCheckbox = styled(Checkbox$2)(function () { return ({
+var StyledCheckbox = styled(Checkbox$1)(function () { return ({
     'div': {
         width: 16,
         height: 16,
@@ -82743,7 +82742,7 @@ var StyledCheckbox = styled(Checkbox$2)(function () { return ({
         },
     },
 }); });
-var StyledPaper = styled(Paper$2)(function () { return ({
+var StyledPaper = styled(Paper$1)(function () { return ({
     border: '2px solid #293072',
     borderRadius: '7px !important',
     translate: '0 -1.5px',
@@ -105400,5 +105399,188 @@ var TableMobileComponent = function (_a) {
     return (jsxRuntime.exports.jsxs(StyledCustomTable, { children: [includeSearch && jsxRuntime.exports.jsx(MUIDataTable, { data: values, columns: columns, options: includeSearchOptions }), !includeSearch && jsxRuntime.exports.jsx(MUIDataTable, { data: values, columns: columns, options: commonOptions })] }));
 };
 
-export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, MultiSelect, SearchBarComponent as SearchBar, Select, TableMobileComponent as TableMobile, TextField, TypographyComponent as Typography };
+var StyledModalContainer = styled(Box)(function (_a) {
+    return ({
+        backgroundColor: 'rgba(41, 48, 114, 0.35)',
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        zIndex: 10,
+        '&.hidden': {
+            display: 'none',
+        }
+    });
+});
+var StyledModalWrapper = styled(Modal, {
+    shouldForwardProp: function (prop) { return prop !== 'isBottomTextButton'; }
+})(function (_a) {
+    var isBottomTextButton = _a.isBottomTextButton;
+    return ({
+        '&.MuiModal-root': {
+            boxSizing: 'border-box',
+            borderRadius: '12px',
+            border: 'none',
+            backgroundColor: theme.mainPallete.primary.white,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            padding: '0 25px',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '320px',
+            height: '423px',
+            '@media(min-width: 720px)': {
+                width: '460px',
+                height: '640px',
+                padding: '0 45px',
+            },
+            '@media(min-width: 1024px)': {
+                width: '270px',
+                height: isBottomTextButton ? '402px' : '364px',
+                padding: '0 40px',
+            },
+            '&.scrollable': {
+                width: '394px',
+                height: '586px',
+                '@media(min-width: 720px)': {
+                    width: '626px',
+                    height: '887px',
+                },
+                '@media(min-width: 1024px)': {
+                    width: '367px',
+                    height: '482px',
+                },
+            },
+        },
+        '.MuiBackdrop-root': {
+            display: 'none',
+            // opacity: 0,
+            // backgroundColor: 'rgba(41, 48, 114, 0.35)'
+        },
+        'svg': {
+            width: '115px',
+            height: '115px',
+            '@media(min-width: 720px)': {
+                width: '170px',
+                height: '170px',
+            },
+            '@media(min-width: 1024px)': {
+                width: '115px',
+                height: '115px',
+            }
+        }
+    });
+});
+var StyledScrollableDescription = styled(Box)(function (_a) {
+    return ({
+        fontSize: '18px',
+        lineHeight: '24px',
+        color: theme.mainPallete.primary.blue,
+        textAlign: 'center',
+        marginBottom: '45px',
+        maxHeight: '200px',
+        overflowY: 'auto',
+        fontFamily: [
+            '"Barlow", sans-serif',
+        ],
+        fontWeight: theme.fontWeight.medium,
+        '@media(min-width: 720px)': {
+            fontSize: '32px',
+            lineHeight: '43px',
+            marginBottom: '60px',
+            maxHeight: '318px',
+        },
+        '@media(min-width: 1024px)': {
+            fontSize: '16px',
+            lineHeight: '21px',
+            fontWeight: theme.fontWeight.regular,
+            marginBottom: '20px',
+            maxHeight: '177px',
+        },
+        '&::-webkit-scrollbar': __assign({}, theme.scrollbar),
+    });
+});
+var StyledButtonsWrapper = styled(Box)(function (_a) {
+    return ({
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        'button:nth-child(2)': {
+            marginLeft: 10
+        }
+    });
+});
+var StyledBottomButtonWrapper = styled(Box)(function (_a) {
+    return ({
+        marginTop: '30px',
+        '@media(min-width: 720px)': {
+            marginTop: '45px',
+        },
+        '@media(min-width:1024px)': {
+            marginTop: '25px'
+        }
+    });
+});
+var CustomModal = function (_a) {
+    // const [open, setOpen] = React.useState(isModalOpen);
+    // const handleOpen = () => setOpen(true);
+    // const handleClose = () => setOpen(false);
+    var actionButtonLabel = _a.actionButtonLabel, bottomButtonLabel = _a.bottomButtonLabel, closeButtonLabel = _a.closeButtonLabel, description = _a.description, title = _a.title, type = _a.type, handleCloseModal = _a.handleCloseModal, handleActionButton = _a.handleActionButton, isModalOpen = _a.isModalOpen;
+    // const showIcon = (type) => {
+    //     if( type==='complete') {
+    //         return <Illustration illustrationName={'ilu_status_change'} size='115'/>
+    //     } else if (type === 'error') {
+    //         return <Illustration illustrationName={'ilu_status_change'} size='big'/>
+    //     } else if (type === 'info') {
+    //         return <Illustration illustrationName={'ilu_status_change'} size='big'/>
+    //     } else return
+    // }
+    var isScrollableTextModal = type === 'text-scroll';
+    var isBottomTextButton = bottomButtonLabel && bottomButtonLabel.length > 0 || false;
+    return (jsxRuntime.exports.jsx(StyledModalContainer, __assign({ className: !isModalOpen ? 'hidden' : '' }, { children: jsxRuntime.exports.jsx(StyledModalWrapper, __assign({ className: isScrollableTextModal ? 'scrollable' : '', onClose: handleCloseModal, isBottomTextButton: isBottomTextButton }, { children: jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(Illustration, { illustrationName: 'ilu_status_change', size: 'small', color: '', isBigType: false }), jsxRuntime.exports.jsx(TypographyComponent, { text: title, type: 'modal-header' }), type === 'basic' && (jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(TypographyComponent, { text: description, type: 'modal-description' }), jsxRuntime.exports.jsx(CustomButtonComponent, { fixed: true, onClick: handleCloseModal, type: "primary", text: closeButtonLabel, color: "navy-blue", size: 'small' })] })), isScrollableTextModal && (jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(StyledScrollableDescription, { children: description }), jsxRuntime.exports.jsxs(StyledButtonsWrapper, { children: [jsxRuntime.exports.jsx(CustomButtonComponent, { fixed: true, onClick: handleActionButton, type: "secondary", text: actionButtonLabel, color: "navy-blue", size: 'small' }), jsxRuntime.exports.jsx(CustomButtonComponent, { fixed: true, onClick: handleCloseModal, type: "primary", text: closeButtonLabel, color: "navy-blue", size: 'small' })] })] })), bottomButtonLabel && !isScrollableTextModal && (jsxRuntime.exports.jsx(StyledBottomButtonWrapper, { children: jsxRuntime.exports.jsx(CustomButtonComponent, { fixed: true, onClick: handleCloseModal, type: "ghost", text: bottomButtonLabel, color: "navy-blue", size: 'small' }) }))] }) })) })));
+};
+
+var StyledModuleTileWrapper = styled(Box, {
+    shouldForwardProp: function (prop) { return prop !== 'fluid'; }
+})(function (_a) {
+    var fluid = _a.fluid;
+    return ({
+        boxSizing: 'border-box',
+        width: fluid ? '100%' : '210px',
+        cursor: 'pointer',
+        minHeight: '240px',
+        padding: '25px 15px 45px 15px',
+        border: "1px solid ".concat(theme.mainPallete.primary.blue),
+        borderRadius: '12px',
+        backgroundColor: theme.mainPallete.primary.white,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        '@media(min-width:720px)': {
+            width: fluid ? '100%' : '320px',
+            minHeight: '350px',
+            padding: '30px 35px 60px 35px',
+        },
+        'svg': {
+            width: '115px',
+            height: '115px',
+            '@media(min-width: 720px)': {
+                width: '170px',
+                height: '170px'
+            }
+        }
+    });
+});
+var ModuleTile = function (_a) {
+    var fluid = _a.fluid, illustrationName = _a.illustrationName, header = _a.header, onClick = _a.onClick;
+    return (jsxRuntime.exports.jsxs(StyledModuleTileWrapper, __assign({ fluid: fluid, onClick: onClick }, { children: [jsxRuntime.exports.jsx(Illustration, { illustrationName: illustrationName, color: '', size: '', isBigType: false }), jsxRuntime.exports.jsx(TypographyComponent, { text: header, type: 'module-tile-header' })] })));
+};
+
+export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, CustomModal as Modal, ModuleTile, MultiSelect, SearchBarComponent as SearchBar, Select, TableMobileComponent as TableMobile, TextField, TypographyComponent as Typography };
 //# sourceMappingURL=index.js.map