@arquimedes.co/eureka-forms 2.0.99 → 3.0.0-refactor

package/dist/Shared/CustomBtn/CustomBtn.js

@@ -1,105 +1,42 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import styles from './CustomBtn.module.css';
 import Loader from '../Loader/Loader';
-function CustomBtn(_a) {
-    var _this = this;
-    var label = _a.label, onClick = _a.onClick, backgroundColor = _a.backgroundColor, color = _a.color, _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.height, height = _d === void 0 ? 'fit-content' : _d, _e = _a.width, width = _e === void 0 ? 'fit-content' : _e, _f = _a.padding, padding = _f === void 0 ? '15px 30px' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? '20px' : _g, _h = _a.contentMargin, contentMargin = _h === void 0 ? '0px 10px' : _h, children = _a.children, others = __rest(_a, ["label", "onClick", "backgroundColor", "color", "loading", "disabled", "height", "width", "padding", "borderRadius", "contentMargin", "children"]);
-    var _j = useState(undefined), coords = _j[0], setCoords = _j[1];
-    var _k = useState(true), mounted = _k[0], setMounted = _k[1];
-    useEffect(function () {
+function CustomBtn({ label, onClick, backgroundColor, color, loading = false, disabled = false, height = 'fit-content', width = 'fit-content', padding = '15px 30px', borderRadius = '20px', contentMargin = '0px 10px', children, ...others }) {
+    const [coords, setCoords] = useState(undefined);
+    const [mounted, setMounted] = useState(true);
+    useEffect(() => {
         if (coords)
             setCoords(undefined);
-        return function () { return setMounted(false); };
+        return () => setMounted(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [label]);
-    return (_jsxs("button", __assign({ className: styles.customBtn, style: {
-            width: width,
-            height: height,
-            borderRadius: borderRadius,
+    return (_jsxs("button", { className: styles.customBtn, style: {
+            width,
+            height,
+            borderRadius,
             background: backgroundColor,
-            padding: padding,
-            color: color,
-        }, "data-testid": others['data-testid'], disabled: disabled || loading, onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-            var rect;
-            return __generator(this, function (_a) {
-                rect = e.target.getBoundingClientRect();
-                setCoords({
-                    x: e.clientX - rect.left,
-                    y: e.clientY - rect.top,
-                });
-                setTimeout(function () {
-                    if (mounted)
-                        setCoords(undefined);
-                }, 600);
-                onClick && onClick(e);
-                return [2 /*return*/];
+            padding,
+            color,
+        }, "data-testid": others['data-testid'], disabled: disabled || loading, onClick: (e) => {
+            const rect = e.target.getBoundingClientRect();
+            setCoords({
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
             });
-        }); } }, { children: [coords ? (_jsx("span", { className: styles.ripple, style: {
+            setTimeout(() => {
+                if (mounted)
+                    setCoords(undefined);
+            }, 600);
+            void onClick?.(e);
+        }, children: [coords ? (_jsx("span", { className: styles.ripple, style: {
                     backgroundColor: color,
                     left: coords.x,
                     top: coords.y,
-                } })) : (_jsx(_Fragment, {})), _jsx("div", __assign({ style: {
+                } })) : (_jsx(_Fragment, {})), _jsx("div", { style: {
                     visibility: loading ? 'hidden' : 'visible',
                     margin: contentMargin,
                     display: 'flex',
-                } }, { children: children !== null && children !== void 0 ? children : label })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: color, position: "unset" }) })))] })));
+                }, children: children ?? label }), loading && (_jsx("div", { className: styles.loaderContainer, children: _jsx(Loader, { color: color, position: "unset" }) }))] }));
 }
 export default CustomBtn;

package/dist/Shared/ErkButton/ErkButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MuiButton, styled } from '@mui/material';
+const StyledButton = styled(MuiButton)(({ height = 28, bold = false, fontColor = '#ffffff', fontSize = '1rem', borderRadius = 10, width = 'fit-content', padding = '0 13px 0 13px', backgroundColor = '#3d5a7f', }) => ({
+    width,
+    textTransform: 'none',
+    fontFamily: 'inherit',
+    fontSize,
+    borderRadius,
+    padding,
+    height: height,
+    boxShadow: 'none',
+    backgroundColor,
+    color: fontColor,
+    '&:hover': {
+        boxShadow: 'none',
+        backgroundColor,
+    },
+    '&:disabled': {
+        backgroundColor,
+        color: fontColor,
+        opacity: 0.5,
+    },
+    fontWeight: bold ? 'bold' : 'normal',
+}));
+/**
+ * Generic capta button
+ */
+function ErkButton({ text, color, ...props }) {
+    return (_jsx(StyledButton, { text: '', fontColor: color, variant: "contained", ...props, children: text }));
+}
+export default ErkButton;

package/dist/Shared/{RoundedButton/RoundedButton.stories.js → ErkButton/ErkButton.stories.js}

@@ -1,6 +1,6 @@
-import RoundedButton from './RoundedButton';
-var meta = {
-    component: RoundedButton,
+import ErkButton from './ErkButton';
+const meta = {
+    component: ErkButton,
     tags: ['autodocs'],
     args: {
         text: 'Label',
@@ -16,18 +16,18 @@ var meta = {
     },
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {
         text: 'Label',
     },
 };
-export var Disabled = {
+export const Disabled = {
     args: {
         text: 'Label',
         disabled: true,
     },
 };
-export var DifferentColors = {
+export const DifferentColors = {
     args: {
         text: 'Label',
         backgroundColor: 'red',

package/dist/Shared/ErkCheckbox/ErkCheckBox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CheckboxUncheckedIcon from '../../Icons/CheckboxUncheckedIcon';
+import CheckboxCheckedIcon from '../../Icons/CheckboxCheckedIcon';
+import { FormControl, Checkbox as MuiCheckbox, styled } from '@mui/material';
+const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding = '9px', disabled, readOnly, error }) => ({
+    padding: padding,
+    fontSize: size,
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: readOnly ? 'none' : undefined,
+    color: error ? theme.palette.error.main : '#787878',
+    '&.Mui-disabled': {
+        color: '#A0A0A0',
+    },
+}));
+/**
+ * Generic capta checkbox
+ */
+function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, ...others }) {
+    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, { style: { fontSize: 'inherit' } }), checkedIcon: _jsx(CheckboxCheckedIcon, { style: { fontSize: 'inherit' } }), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkCheckbox extends React.Component {
+    render() {
+        return _jsx(CustomCheckBox, { ...this.props });
+    }
+}
+export default ErkCheckbox;

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.js

@@ -0,0 +1,37 @@
+import ErkCheckBox from './ErkCheckBox';
+const meta = {
+    component: ErkCheckBox,
+    tags: ['autodocs'],
+    args: {
+        size: '1.5rem',
+    },
+};
+export default meta;
+export const Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+export const Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CalendarIcon from '../../Icons/CalendarIcon';
+import { styled, Dialog as MuiDialog } from '@mui/material';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, PickersDay as MuiPickerDay, } from '@mui/x-date-pickers';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+const StyledDateTimePicker = styled(MuiDateTimePicker)(({ ...props }) => ({
+    '& .EF-MuiInputBase-root': {
+        cursor: props.disabled ? 'default' : 'pointer',
+        '& input': {
+            cursor: props.disabled ? 'default' : 'pointer',
+            paddingRight: '0px',
+        },
+    },
+}));
+const StyledDatePicker = styled(MuiDatePicker)(({ ...props }) => ({
+    '& .EF-MuiInputBase-root': {
+        cursor: props.disabled ? 'default' : 'pointer',
+        '& input': {
+            cursor: props.disabled ? 'default' : 'pointer',
+        },
+    },
+}));
+const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
+    '&.MuiPickersToolbar-root': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '& span': {
+            fontSize: '1rem',
+            textTransform: 'capitalize',
+            color: theme.palette.primary.contrastText,
+        },
+        '& .MuiDateTimePickerToolbar-dateContainer': {
+            '& span': {
+                fontSize: '1.1rem',
+            },
+        },
+        '& .MuiDateTimePickerToolbar-timeDigitsContainer': {
+            '& span': {
+                fontSize: '2.3rem',
+            },
+        },
+        '& .MuiDateTimePickerToolbar-ampmSelection': {
+            '& span': {
+                color: theme.palette.primary.contrastText + '8b',
+                '&.Mui-selected': {
+                    color: theme.palette.primary.contrastText,
+                    fontWeight: 600,
+                },
+            },
+        },
+    },
+    cursor: 'default',
+    '& .MuiTypography-root': {
+        textTransform: 'capitalize',
+        color: theme.palette.primary.contrastText,
+    },
+}));
+const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
+    '&.MuiPickersToolbar-root': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '& span': {
+            fontSize: '1rem',
+            textTransform: 'capitalize',
+            color: theme.palette.primary.contrastText,
+        },
+    },
+    cursor: 'default',
+    '& .MuiTypography-root': {
+        textTransform: 'capitalize',
+        color: theme.palette.primary.contrastText,
+    },
+}));
+const StyledDialog = styled(MuiDialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: '5px',
+        backgroundColor: 'transparent',
+    },
+    '& .EF-MuiDialogActions-root': {
+        '& .EF-MuiButtonBase-root': { fontWeight: 700 },
+    },
+    '& .MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
+    '& .MuiDayCalendar-weekDayLabel': {
+        cursor: 'default',
+    },
+    '& .MuiPickersCalendarHeader-root': {
+        marginTop: 5,
+    },
+    '& .MuiDateCalendar-root': {
+        height: 'fit-content',
+    },
+    '& .MuiPickersSlideTransition-root': {
+        minHeight: '195px',
+    },
+    '& .MuiClock-root': {
+        marginTop: '34px',
+        marginBottom: '30px',
+    },
+    '& .MuiTimeClock-arrowSwitcher': {
+        top: 5,
+    },
+}));
+const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
+    fontWeight: 500,
+    fontSize: '0.9rem',
+    lineHeight: 'normal',
+    '&.MuiPickersDay-today': {
+        backgroundColor: theme.palette.primary.main + '33',
+    },
+    '&.MuiPickersDay-dayOutsideMonth': {
+        color: 'rgb(0,0,0,0.4)',
+        '&.Mui-selected': {
+            color: theme.palette.primary.contrastText,
+        },
+    },
+}));
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, pickTime = false, ...others }) {
+    if (pickTime) {
+        return (_jsx(StyledDateTimePicker, { ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+                actionBar: {
+                    actions: ['clear', 'accept'],
+                },
+                layout: {
+                    sx: {
+                        backgroundColor: '#ffffff',
+                        textTransform: 'capitalize',
+                    },
+                },
+                monthButton: {
+                    sx: {
+                        textTransform: 'capitalize',
+                    },
+                },
+                toolbar: {
+                    toolbarFormat: 'eee, d MMM',
+                    hidden: false,
+                    toolbarPlaceholder: '– –',
+                },
+                textField: {
+                    error,
+                    disabled,
+                    helperText,
+                    placeholder: '',
+                    InputProps: {
+                        disabled: disabled ?? readOnly,
+                        endAdornment: (_jsx(CalendarIcon, { style: {
+                                width: 27,
+                                height: 27,
+                            } })),
+                    },
+                },
+            }, slots: {
+                day: StyledDay,
+                dialog: StyledDialog,
+                toolbar: StyledDateTimeToolBar,
+                textField: StyledTextField,
+            } }));
+    }
+    else {
+        return (_jsx(StyledDatePicker, { ...others, readOnly: readOnly, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+                actionBar: {
+                    actions: ['clear', 'accept'],
+                },
+                layout: {
+                    sx: {
+                        backgroundColor: '#ffffff',
+                        textTransform: 'capitalize',
+                    },
+                },
+                monthButton: {
+                    sx: {
+                        textTransform: 'capitalize',
+                    },
+                },
+                toolbar: {
+                    toolbarFormat: 'eee, d MMM',
+                    hidden: false,
+                    toolbarPlaceholder: '– –',
+                },
+                textField: {
+                    error,
+                    disabled,
+                    helperText,
+                    placeholder: '',
+                    InputProps: {
+                        disabled: disabled ?? readOnly,
+                        endAdornment: (_jsx(CalendarIcon, { style: {
+                                width: 27,
+                                height: 27,
+                            } })),
+                    },
+                },
+            }, localeText: {}, slots: {
+                day: StyledDay,
+                dialog: StyledDialog,
+                toolbar: StyledDateToolBar,
+                textField: StyledTextField,
+            } }));
+    }
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkDatePicker extends React.Component {
+    render() {
+        return _jsx(CustomDatePicker, { ...this.props });
+    }
+}
+export default ErkDatePicker;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkDatePicker from './ErkDatePicker';
+import { within, screen } from '@storybook/testing-library';
+import { userEvent } from '@storybook/testing-library';
+const meta = {
+    component: ErkDatePicker,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        value: null,
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePicker, { ...args, ref: args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export const FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+        const time = screen.getByText('12', {
+            selector: 'h3',
+        });
+        await userEvent.click(time);
+    },
+};

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import parse from 'libphonenumber-js/max';
+import { defaultCountries, FlagImage, parseCountry, usePhoneInput } from 'react-international-phone';
+import { useAppSelector } from '../../hooks';
+import isoCountries from 'i18n-iso-countries';
+import es from 'i18n-iso-countries/langs/es.json';
+import { InputAdornment, Select, styled } from '@mui/material';
+import { MenuItem } from '@mui/material';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+isoCountries.registerLocale(es);
+const StyledSelect = styled(Select)(({ theme }) => ({
+    padding: 0,
+    input: {
+        padding: 0,
+    },
+    '& .EF-MuiSelect-select.EF-MuiInputBase-inputSizeSmall': {
+        paddingBottom: 0,
+        borderBottom: 'none',
+    },
+    backgroundColor: theme.palette.stepBackgroundColor.default,
+    '& input': {
+        padding: 0,
+        margin: 0,
+    },
+    '&.EF-MuiInputBase-root::before': {
+        borderBottom: 'none !important',
+    },
+    '&.EF-MuiInput-underline::after': {
+        borderBottom: 'none',
+    },
+}));
+function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, ...others }) {
+    const defaultCountry = useAppSelector((state) => state.global.countryCode);
+    const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
+        value: '+' + value,
+        inputRef,
+        defaultCountry: defaultCountry.toLowerCase(),
+        disableDialCodePrefill: true,
+        disableDialCodeAndPrefix: true,
+        onChange: (data) => onChange(data.phone.replace('+', '')),
+    });
+    const countries = useMemo(() => defaultCountries
+        .map((c) => {
+        const country = parseCountry(c);
+        return {
+            country,
+            name: isoCountries.getName(country.iso2.toUpperCase(), 'es') ?? country.name,
+        };
+    })
+        .sort((a, b) => a.name.localeCompare(b.name)), []);
+    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: "small", variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
+                const value = e.clipboardData.getData('Text');
+                if (!value.startsWith('+')) {
+                    const phone = parse('+' + value);
+                    if (phone?.isValid()) {
+                        e.preventDefault();
+                        if (phone.country)
+                            setCountry(phone.country.toLowerCase());
+                        onChange(phone.number);
+                    }
+                }
+            }, slotProps: {
+                input: {
+                    disabled: readOnly || disabled,
+                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: "small", variant: "standard", value: country.iso2, inputProps: { disabled: readOnly || disabled }, onChange: (e) => setCountry(e.target.value), renderValue: (value) => (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })), children: countries.map(({ country, name }) => {
+                                return (_jsxs(MenuItem, { value: country.iso2, children: [_jsx(FlagImage, { iso2: country.iso2, size: 20 }), _jsx("span", { style: {
+                                                marginLeft: '8px',
+                                                marginRight: '8px',
+                                            }, children: name }), _jsxs("span", { style: { color: 'grey' }, children: ["+", country.dialCode] })] }, country.iso2));
+                            }) }) })),
+                },
+            } }) }));
+}
+/**
+ * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkPhoneInput extends React.Component {
+    render() {
+        return _jsx(CustomPhoneInput, { ...this.props });
+    }
+}
+export default ErkPhoneInput;