@xelto.npm/xc2-lib 0.0.46 → 0.0.47

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

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

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

@@ -10,3 +10,4 @@ export { default as BottomInfoBar } from "./bottomInfoBar";
 export { default as Checkbox } from "./checkbox";
 export { default as DatePicker } from "./Inputs/datepicker";
 export { default as TextField } from "./Inputs/textfield";
+export { default as Select } from "./Inputs/select";

package/dist/esm/index.js

@@ -42040,7 +42040,7 @@ const styledRootConfig = {
 const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
-const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
+const Select$1 = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSelect',
     props: inProps
@@ -42130,7 +42130,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     }, other))
   });
 });
-process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Select$1.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -42277,7 +42277,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
    */
   variant: propTypes.exports.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
-Select.muiName = 'Select';
+Select$1.muiName = 'Select';
 
 function getTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiTextField', slot);
@@ -42449,7 +42449,7 @@ const TextField$1 = /*#__PURE__*/React.forwardRef(function TextField(inProps, re
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), select ? /*#__PURE__*/jsxRuntime.exports.jsx(Select, _extends$1b({
+    })), select ? /*#__PURE__*/jsxRuntime.exports.jsx(Select$1, _extends$1b({
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
@@ -72202,7 +72202,7 @@ const TablePaginationSelectLabel = styled('p', {
 }) => _extends$1b({}, theme.typography.body2, {
   flexShrink: 0
 }));
-const TablePaginationSelect = styled(Select, {
+const TablePaginationSelect = styled(Select$1, {
   name: 'MuiTablePagination',
   slot: 'Select',
   overridesResolver: (props, styles) => _extends$1b({
@@ -81431,5 +81431,191 @@ var TextField = function (_a) {
         } })));
 };
 
-export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, TextField, TypographyComponent as Typography };
+var StyledAutocomplete = styled(Autocomplete)(function (_a) {
+    return ({
+        width: '100%',
+        '& label': {
+            zIndex: 0,
+            color: theme.mainPallete.primary.placeholderText,
+            transform: 'translate(20px,15px) scale(1)',
+            '&.Mui-focused, &[data-shrink="true"]': {
+                color: theme.mainPallete.primary.blue,
+                transform: 'translate(15px,-10px) scale(0.75)',
+            },
+            '&.Mui-disabled': {
+                color: theme.mainPallete.primary.placeholderText,
+            },
+        },
+        '& label, .MuiOutlinedInput-root': {
+            fontSize: 21,
+            fontWeight: theme.fontWeight.regular,
+            fontFamily: theme.fontFamily,
+        },
+        '.MuiOutlinedInput-root': {
+            color: theme.mainPallete.primary.blue,
+            padding: '7.5px 75px 7.5px 20px !important',
+            borderRadius: 7,
+            '&.Mui-focused': {
+                '.MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.mainPallete.primary.blue,
+                },
+            },
+            '.MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.mainPallete.primary.blue,
+            },
+            '&.Mui-disabled fieldset': {
+                borderColor: theme.mainPallete.primary.placeholderText,
+            },
+            '&.MuiInputBase-adornedStart': {
+                paddingTop: 13,
+                paddingBottom: 13
+            },
+        },
+        'div.MuiAutocomplete-endAdornment': {
+            top: 'calc(50% - 17px)',
+            right: '20px !important',
+            'button': {
+                padding: 0,
+                transition: 'transform 0.15s linear',
+                '&[aria-label="Close"]': {
+                    transform: 'rotateX(180deg)'
+                }
+            },
+            '.MuiAutocomplete-clearIndicator': {
+                marginRight: '4px !important',
+                color: theme.mainPallete.primary.blue
+            },
+            'svg': {
+                width: 26,
+                height: 26,
+            }
+        },
+        '@media(min-width: 720px)': {
+            '& label': {
+                transform: 'translate(20px,17px) scale(1)',
+                '&.Mui-focused, &[data-shrink="true"]': {
+                    transform: 'translate(14px,-14px) scale(0.75)',
+                },
+            },
+            '& label, .MuiOutlinedInput-root': {
+                fontSize: 26,
+            },
+            '.MuiOutlinedInput-root': {
+                padding: '11.5px 75px 11.5px 20px !important',
+            },
+            'div.MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 22px)',
+                '.MuiAutocomplete-clearIndicator': {
+                    marginRight: '8px !important',
+                },
+                'svg': {
+                    width: 30,
+                    height: 30,
+                }
+            },
+        },
+        '@media(min-width: 1024px)': {
+            '& label': {
+                transform: 'translate(20px,11px) scale(1)',
+                '&.Mui-focused, &[data-shrink="true"]': {
+                    transform: 'translate(15px,-9px) scale(0.75)'
+                },
+            },
+            '& label, .MuiOutlinedInput-root': {
+                fontSize: 16,
+            },
+            '.MuiOutlinedInput-root': {
+                padding: '3.5px 65px 3.5px 20px !important',
+            },
+            'div.MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 13px)',
+                '.MuiAutocomplete-clearIndicator': {
+                    marginRight: '2px !important',
+                },
+                'svg': {
+                    width: 22,
+                    height: 22,
+                }
+            },
+        },
+    });
+});
+var StyledWrapper = styled('div', {
+    shouldForwardProp: function (prop) { return prop !== "fluid"; }
+})(function (_a) {
+    var fluid = _a.fluid;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        width: fluid === true ? '100%' : 'min(100%, 368px)',
+        '@media (min-width: 720px) and (max-width: 1023px)': {
+            width: fluid === true ? '100%' : 'min(100%, 468px)',
+        },
+        '@media (min-width: 1024px)': {
+            width: fluid === true ? '100%' : 'min(100%, 268px)',
+        },
+    });
+});
+var StyledPaper = styled(Paper)(function (_a) { return ({
+    border: '2px solid #293072',
+    borderRadius: '7px !important',
+    translate: '0 -1.5px',
+    '.MuiAutocomplete-listbox': {
+        fontSize: 21,
+        margin: '16px 8px !important',
+        fontWeight: theme.fontWeight.regular,
+        fontFamily: theme.fontFamily,
+        color: theme.mainPallete.primary.blue,
+        padding: '0 !important',
+        '&::-webkit-scrollbar': __assign({}, theme.scrollbar),
+        '@media(min-width: 720px)': {
+            fontSize: 26,
+        },
+        '@media(min-width: 1024px)': {
+            fontSize: 16,
+        }
+    },
+    '.MuiAutocomplete-option': {
+        padding: '6px 14px !important',
+        '@media(min-width: 720px)': {
+            padding: '9px 14px !important',
+        },
+        '@media(min-width: 1024px)': {
+            padding: '3px 14px !important',
+        }
+    },
+    '.MuiAutocomplete-noOptions': {
+        fontWeight: theme.fontWeight.regular,
+        fontFamily: theme.fontFamily,
+        color: theme.mainPallete.primary.placeholderText + '!important',
+    },
+}); });
+var Select = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.label, label = _c === void 0 ? 'Select' : _c, _d = _a.withRefresh, withRefresh = _d === void 0 ? false : _d, _e = _a.fluid, fluid = _e === void 0 ? false : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f; _a.onRefreshClick; var _h = _a.options, options = _h === void 0 ? [] : _h, _j = _a.value, value = _j === void 0 ? null : _j, _k = _a.onChange, onChange = _k === void 0 ? null : _k, _l = _a.forwardedRef, forwardedRef = _l === void 0 ? null : _l, _m = _a.noOptionsText, noOptionsText = _m === void 0 ? "" : _m, props = __rest(_a, ["disabled", "label", "withRefresh", "fluid", "placeholder", "onRefreshClick", "options", "value", "onChange", "forwardedRef", "noOptionsText"]);
+    var _o = React.useState(360), deg = _o[0], SetDeg = _o[1];
+    var flag = false;
+    var onRefresh = function (target) {
+        if (flag)
+            return;
+        if (!target)
+            return;
+        var targetAsHTMLElement = target;
+        targetAsHTMLElement.style.transform = "rotate(".concat(deg, "deg)");
+        SetDeg(deg + 360);
+        flag = true;
+        setTimeout(function () {
+            flag = false;
+        }, 300);
+    };
+    return (jsxRuntime.exports.jsxs(StyledWrapper, __assign({ fluid: fluid, ref: forwardedRef }, { children: [jsxRuntime.exports.jsx(StyledAutocomplete, __assign({}, props, { disabled: disabled, options: options, value: value, 
+                // @ts-ignore
+                onChange: onChange, popupIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_ui_chevron_down", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), PaperComponent: StyledPaper, renderInput: function (params) { return jsxRuntime.exports.jsx(TextField$1, __assign({}, params, { label: label, placeholder: placeholder })); }, noOptionsText: noOptionsText })), withRefresh ? jsxRuntime.exports.jsx(Icon$1, { iconName: 'icon_wf_refresh', style: { display: 'flex' }, onClick: function (e) {
+                    var target = e.target;
+                    if (onRefresh) {
+                        onRefresh(target.parentNode);
+                    }
+                } }) : null] })));
+};
+
+export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, Select, TextField, TypographyComponent as Typography };
 //# sourceMappingURL=index.js.map