Merge conflicts resolved

frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx

@@ -12,6 +12,7 @@ const shouldAddBoxShadowAndVisibility = [
   'TextInput',
   'TextArea',
   'PasswordInput',
+  'EmailInput',
   'NumberInput',
   'Text',
   'Checkbox',
@@ -87,6 +88,7 @@ const RenderWidget = ({
         ...{ widgetValue: value },
         ...{ validationObject: unResolvedValidation },
         customResolveObjects: customResolvables,
+        componentType,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [validateWidget, customResolvables, unResolvedValidation, resolvedValidation]

frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx

@@ -119,6 +119,7 @@ export const ComponentsManagerTab = ({ darkMode }) => {
         'NumberInput',
         'PasswordInput',
         'TextArea',
+        'EmailInput',
         'ToggleSwitchV2',
         'DropdownV2',
         'MultiselectV2',

frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx

@@ -17,6 +17,7 @@ const SHOW_ADDITIONAL_ACTIONS = [
   'TextArea',
   'NumberInput',
   'PasswordInput',
+  'EmailInput',
   'ToggleSwitchV2',
   'Checkbox',
   'DropdownV2',
@@ -123,6 +124,7 @@ export const baseComponentProperties = (
       'TextInput',
       'PasswordInput',
       'TextArea',
+      'EmailInput',
       'NumberInput',
       'Text',
       'Table',

frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx

@@ -36,6 +36,7 @@ import { EMPTY_ARRAY } from '@/_stores/editorStore';
 import { Select } from './Components/Select';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import useStore from '@/AppBuilder/_stores/store';
+// import { componentTypes } from '@/Editor/WidgetManager/components';
 import { componentTypes } from '@/AppBuilder/WidgetManager/componentTypes';
 import { copyComponents } from '@/AppBuilder/AppCanvas/appCanvasUtils.js';
 import DatetimePickerV2 from './Components/DatetimePickerV2.jsx';
@@ -68,6 +69,7 @@ const NEW_REVAMPED_COMPONENTS = [
   'TextInput',
   'TextArea',
   'PasswordInput',
+  'EmailInput',
   'NumberInput',
   'Table',
   'ToggleSwitchV2',

frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js

@@ -43,6 +43,7 @@ export function renderCustomStyles(
     componentConfig.component == 'TextInput' ||
     componentConfig.component == 'NumberInput' ||
     componentConfig.component == 'PasswordInput' ||
+    componentConfig.component == 'EmailInput' ||
     componentConfig.component == 'ToggleSwitchV2' ||
     componentConfig.component == 'Checkbox' ||
     componentConfig.component == 'Table' ||

frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js

@@ -58,6 +58,7 @@ import {
   linkConfig,
   iconConfig,
   boundedBoxConfig,
+  emailinputConfig,
 } from '../widgets';
 
 export const widgets = [
@@ -70,6 +71,7 @@ export const widgets = [
   textinputConfig,
   numberinputConfig,
   passinputConfig,
+  emailinputConfig,
   datepickerConfig,
   datetimePickerV2Config,
   datePickerV2Config,

frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js

@@ -0,0 +1,292 @@
+export const emailinputConfig = {
+  name: 'EmailInput',
+  displayName: 'Email Input',
+  description: 'Email input field',
+  component: 'EmailInput',
+  defaultSize: {
+    width: 10,
+    height: 40,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
+    placeholder: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Enter email',
+      },
+    },
+    value: {
+      type: 'code',
+      displayName: 'Default value',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Default value',
+      },
+    },
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
+  },
+  validation: {
+    mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+    regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
+    minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
+    maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
+    customRule: {
+      type: 'code',
+      displayName: 'Custom validation',
+      placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+    },
+  },
+  events: {
+    onChange: { displayName: 'On change' },
+    onEnterPressed: { displayName: 'On enter pressed' },
+    onFocus: { displayName: 'On focus' },
+    onBlur: { displayName: 'On blur' },
+  },
+  styles: {
+    color: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+
+    backgroundColor: {
+      type: 'color',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      accordian: 'field',
+    },
+    borderColor: {
+      type: 'color',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'color',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      accordian: 'field',
+    },
+    textColor: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'field',
+    },
+    errTextColor: {
+      type: 'color',
+      displayName: 'Error text',
+      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      accordian: 'field',
+    },
+    icon: {
+      type: 'icon',
+      displayName: 'Icon',
+      validation: { schema: { type: 'string' }, defaultValue: 'IconMailFilled' },
+      accordian: 'field',
+      visibility: true,
+    },
+    iconColor: {
+      type: 'color',
+      displayName: 'Icon color',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+      visibility: false,
+      showLabel: false,
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
+      accordian: 'field',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box Shadow',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: '0px 0px 0px 0px #00000040',
+      },
+      accordian: 'field',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
+    },
+  },
+  exposedVariables: {
+    value: '',
+    isMandatory: false,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setText',
+      displayName: 'Set text',
+      params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
+    },
+    {
+      handle: 'clear',
+      displayName: 'Clear',
+    },
+    {
+      handle: 'setFocus',
+      displayName: 'Set focus',
+    },
+    {
+      handle: 'setBlur',
+      displayName: 'Set blur',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    validation: {
+      mandatory: { value: '{{false}}' },
+      regex: { value: '' },
+      minLength: { value: '' },
+      maxLength: { value: '' },
+      customRule: { value: '' },
+    },
+
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      value: { value: '' },
+      label: { value: 'Label' },
+      placeholder: { value: 'Enter email' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
+    },
+    events: [],
+    styles: {
+      textColor: { value: '#1B1F24' },
+      borderColor: { value: '#CCD1D5' },
+      accentColor: { value: '#4368E3' },
+      errTextColor: { value: '#D72D39' },
+      borderRadius: { value: '{{6}}' },
+      backgroundColor: { value: '#fff' },
+      iconColor: { value: '#CCD1D5' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: '#1B1F24' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
+      boxShadow: { value: '0px 0px 0px 0px #00000040' },
+      icon: { value: 'IconMailFilled' },
+      iconVisibility: { value: true },
+    },
+  },
+};

frontend/src/AppBuilder/WidgetManager/widgets/index.js

@@ -58,6 +58,7 @@ import { kanbanBoardConfig } from './kanbanBoard';
 import { datetimePickerV2Config } from './datetimepickerV2';
 import { datePickerV2Config } from './datepickerV2';
 import { timePickerConfig } from './timepicker';
+import { emailinputConfig } from './emailinput';
 
 export {
   buttonConfig,
@@ -73,6 +74,7 @@ export {
   datetimePickerV2Config,
   datePickerV2Config,
   timePickerConfig,
+  emailinputConfig,
   checkboxConfig,
   radiobuttonConfig, //!Depreciated
   radiobuttonV2Config,

frontend/src/AppBuilder/Widgets/EmailInput.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BaseInput } from './BaseComponents/BaseInput';
+import { useInput } from './BaseComponents/hooks/useInput';
+
+export const EmailInput = (props) => {
+  const inputLogic = useInput(props);
+  const additionalInputProps = {
+    autocomplete: 'email',
+    name: 'email',
+  };
+  return <BaseInput {...props} {...inputLogic} inputType="email" additionalInputProps={additionalInputProps} />;
+};

frontend/src/AppBuilder/_helpers/editorHelpers.js

@@ -30,6 +30,7 @@ import { StarRating } from '@/Editor/Components/StarRating';
 import { Divider } from '@/Editor/Components/Divider';
 import { FilePicker } from '@/Editor/Components/FilePicker';
 import { PasswordInput } from '@/AppBuilder/Widgets/PasswordInput';
+import { EmailInput } from '@/Editor/Components/EmailInput';
 // import { Calendar } from '@/Editor/Components/Calendar';
 // import { Listview } from '@/Editor/Components/Listview';
 import { IFrame } from '@/Editor/Components/IFrame';
@@ -118,6 +119,7 @@ export const AllComponents = {
   Divider,
   FilePicker,
   PasswordInput,
+  EmailInput,
   Calendar,
   IFrame,
   CodeEditor,

frontend/src/AppBuilder/_stores/slices/componentsSlice.js

@@ -439,7 +439,7 @@ export const createComponentsSlice = (set, get) => ({
     }
   },
 
-  validateWidget: ({ validationObject, widgetValue, customResolveObjects }) => {
+  validateWidget: ({ validationObject, widgetValue, customResolveObjects, componentType }) => {
     const { getResolvedValue } = get();
     let isValid = true;
     let validationError = null;
@@ -455,6 +455,17 @@ export const createComponentsSlice = (set, get) => ({
     validationRegex = typeof validationRegex === 'string' ? validationRegex : '';
     const re = new RegExp(validationRegex, 'g');
 
+    if (componentType === 'EmailInput' && widgetValue) {
+      const validationRegex = '^(?!.*\\.\\.)([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,})$';
+      const emailRegex = new RegExp(validationRegex, 'g');
+      if (!emailRegex.test(widgetValue)) {
+        return {
+          isValid: false,
+          validationError: 'Input should be a valid email',
+        };
+      }
+    }
+
     if (!re.test(widgetValue)) {
       return {
         isValid: false,
@@ -1833,6 +1844,7 @@ export const createComponentsSlice = (set, get) => ({
       ![
         'TextInput',
         'PasswordInput',
+        'EmailInput',
         'NumberInput',
         'DropdownV2',
         'MultiselectV2',

server/src/modules/apps/services/widget-config/emailinput.js

@@ -0,0 +1,292 @@
+export const emailinputConfig = {
+  name: 'EmailInput',
+  displayName: 'Email Input',
+  description: 'Email input field',
+  component: 'EmailInput',
+  defaultSize: {
+    width: 10,
+    height: 40,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
+    placeholder: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Enter email',
+      },
+    },
+    value: {
+      type: 'code',
+      displayName: 'Default value',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Default value',
+      },
+    },
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
+  },
+  validation: {
+    mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+    regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
+    minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
+    maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
+    customRule: {
+      type: 'code',
+      displayName: 'Custom validation',
+      placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+    },
+  },
+  events: {
+    onChange: { displayName: 'On change' },
+    onEnterPressed: { displayName: 'On enter pressed' },
+    onFocus: { displayName: 'On focus' },
+    onBlur: { displayName: 'On blur' },
+  },
+  styles: {
+    color: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+
+    backgroundColor: {
+      type: 'color',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      accordian: 'field',
+    },
+    borderColor: {
+      type: 'color',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'color',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      accordian: 'field',
+    },
+    textColor: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'field',
+    },
+    errTextColor: {
+      type: 'color',
+      displayName: 'Error text',
+      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      accordian: 'field',
+    },
+    icon: {
+      type: 'icon',
+      displayName: 'Icon',
+      validation: { schema: { type: 'string' }, defaultValue: 'IconMailFilled' },
+      accordian: 'field',
+      visibility: true,
+    },
+    iconColor: {
+      type: 'color',
+      displayName: 'Icon color',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+      visibility: false,
+      showLabel: false,
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
+      accordian: 'field',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box Shadow',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: '0px 0px 0px 0px #00000040',
+      },
+      accordian: 'field',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
+    },
+  },
+  exposedVariables: {
+    value: '',
+    isMandatory: false,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setText',
+      displayName: 'Set text',
+      params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
+    },
+    {
+      handle: 'clear',
+      displayName: 'Clear',
+    },
+    {
+      handle: 'setFocus',
+      displayName: 'Set focus',
+    },
+    {
+      handle: 'setBlur',
+      displayName: 'Set blur',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    validation: {
+      mandatory: { value: '{{false}}' },
+      regex: { value: '' },
+      minLength: { value: '' },
+      maxLength: { value: '' },
+      customRule: { value: '' },
+    },
+
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      value: { value: '' },
+      label: { value: 'Label' },
+      placeholder: { value: 'Enter email' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
+    },
+    events: [],
+    styles: {
+      textColor: { value: '#1B1F24' },
+      borderColor: { value: '#CCD1D5' },
+      accentColor: { value: '#4368E3' },
+      errTextColor: { value: '#D72D39' },
+      borderRadius: { value: '{{6}}' },
+      backgroundColor: { value: '#fff' },
+      iconColor: { value: '#CCD1D5' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: '#1B1F24' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
+      boxShadow: { value: '0px 0px 0px 0px #00000040' },
+      icon: { value: 'IconMailFilled' },
+      iconVisibility: { value: true },
+    },
+  },
+};

server/src/modules/apps/services/widget-config/index.js

@@ -58,6 +58,7 @@ import { kanbanBoardConfig } from './kanbanBoard';
 import { datetimePickerV2Config } from './datetimepickerV2';
 import { datePickerV2Config } from './datepickerV2';
 import { timePickerConfig } from './timepicker';
+import { emailinputConfig } from './emailinput';
 
 const widgets = {
   buttonConfig,
@@ -73,6 +74,7 @@ const widgets = {
   datetimePickerV2Config,
   datePickerV2Config,
   timePickerConfig,
+  emailinputConfig,
   checkboxConfig,
   radiobuttonConfig, //!Depreciated
   radiobuttonV2Config,