From 7ed8449ff927ca9275b0add9f9c10266581ad2c6 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 18 Mar 2025 21:53:08 +0530 Subject: [PATCH] Phone input base --- .../src/AppBuilder/AppCanvas/RenderWidget.jsx | 1 + .../ComponentsManagerTab.jsx | 1 + .../Inspector/Components/DefaultComponent.jsx | 2 + .../RightSideBar/Inspector/Inspector.jsx | 1 + .../RightSideBar/Inspector/Utils.js | 1 + .../WidgetManager/configs/widgetConfig.js | 2 + .../AppBuilder/WidgetManager/widgets/index.js | 2 + .../WidgetManager/widgets/phoneinput.js | 303 ++++++++++++++++++ .../src/AppBuilder/Widgets/PhoneInput.jsx | 8 + .../src/AppBuilder/_helpers/editorHelpers.js | 2 + .../_stores/slices/componentsSlice.js | 1 + .../apps/services/widget-config/index.js | 2 + .../apps/services/widget-config/phoneinput.js | 303 ++++++++++++++++++ 13 files changed, 629 insertions(+) create mode 100644 frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js create mode 100644 frontend/src/AppBuilder/Widgets/PhoneInput.jsx create mode 100644 server/src/modules/apps/services/widget-config/phoneinput.js diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx index 19c6b2b613..b95103bdc8 100644 --- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx +++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx @@ -13,6 +13,7 @@ const shouldAddBoxShadowAndVisibility = [ 'TextArea', 'PasswordInput', 'EmailInput', + 'PhoneInput', 'NumberInput', 'Text', 'Checkbox', diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx index e51a25a7da..60eeaff396 100644 --- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx +++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx @@ -120,6 +120,7 @@ export const ComponentsManagerTab = ({ darkMode }) => { 'PasswordInput', 'TextArea', 'EmailInput', + 'PhoneInput', 'ToggleSwitchV2', 'DropdownV2', 'MultiselectV2', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx index b0032e1197..a17cbde145 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx @@ -18,6 +18,7 @@ const SHOW_ADDITIONAL_ACTIONS = [ 'NumberInput', 'PasswordInput', 'EmailInput', + 'PhoneInput', 'ToggleSwitchV2', 'Checkbox', 'DropdownV2', @@ -125,6 +126,7 @@ export const baseComponentProperties = ( 'PasswordInput', 'TextArea', 'EmailInput', + 'PhoneInput', 'NumberInput', 'Text', 'Table', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx index 60325ef372..96b853486f 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx @@ -70,6 +70,7 @@ const NEW_REVAMPED_COMPONENTS = [ 'TextArea', 'PasswordInput', 'EmailInput', + 'PhoneInput', 'NumberInput', 'Table', 'ToggleSwitchV2', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js index 67d3581231..2b20c667d4 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js @@ -44,6 +44,7 @@ export function renderCustomStyles( componentConfig.component == 'NumberInput' || componentConfig.component == 'PasswordInput' || componentConfig.component == 'EmailInput' || + componentConfig.component == 'PhoneInput' || componentConfig.component == 'ToggleSwitchV2' || componentConfig.component == 'Checkbox' || componentConfig.component == 'Table' || diff --git a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js index 901538bfc2..bdc7d2482f 100644 --- a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js +++ b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js @@ -59,6 +59,7 @@ import { iconConfig, boundedBoxConfig, emailinputConfig, + phoneinputConfig, } from '../widgets'; export const widgets = [ @@ -72,6 +73,7 @@ export const widgets = [ numberinputConfig, passinputConfig, emailinputConfig, + phoneinputConfig, datepickerConfig, datetimePickerV2Config, datePickerV2Config, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/index.js b/frontend/src/AppBuilder/WidgetManager/widgets/index.js index f916541b8f..64030765f8 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/index.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/index.js @@ -59,6 +59,7 @@ import { datetimePickerV2Config } from './datetimepickerV2'; import { datePickerV2Config } from './datepickerV2'; import { timePickerConfig } from './timepicker'; import { emailinputConfig } from './emailinput'; +import { phoneinputConfig } from './phoneinput'; export { buttonConfig, @@ -75,6 +76,7 @@ export { datePickerV2Config, timePickerConfig, emailinputConfig, + phoneinputConfig, checkboxConfig, radiobuttonConfig, //!Depreciated radiobuttonV2Config, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js new file mode 100644 index 0000000000..c1567a9b87 --- /dev/null +++ b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js @@ -0,0 +1,303 @@ +export const phoneinputConfig = { + name: 'PhoneInput', + displayName: 'Phone Input', + description: 'Phone input field', + component: 'PhoneInput', + 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 your input', + }, + }, + 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: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, + 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: 'disable', + displayName: 'Disable(deprecated)', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'visibility', + displayName: 'Visibility(deprecated)', + params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + 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 your phone' }, + 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: '#CFD3D859' }, + 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: 'IconHome2' }, + iconVisibility: { value: false }, + }, + }, +}; diff --git a/frontend/src/AppBuilder/Widgets/PhoneInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneInput.jsx new file mode 100644 index 0000000000..3a73d2209d --- /dev/null +++ b/frontend/src/AppBuilder/Widgets/PhoneInput.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { default as ReactPhoneInput } from 'react-phone-input-2'; +import 'react-phone-input-2/lib/material.css'; + +export const PhoneInput = (props) => { + const [value, setValue] = React.useState(); + return ; +}; diff --git a/frontend/src/AppBuilder/_helpers/editorHelpers.js b/frontend/src/AppBuilder/_helpers/editorHelpers.js index 4a065f4cb0..53906f7d4a 100644 --- a/frontend/src/AppBuilder/_helpers/editorHelpers.js +++ b/frontend/src/AppBuilder/_helpers/editorHelpers.js @@ -31,6 +31,7 @@ import { Divider } from '@/Editor/Components/Divider'; import { FilePicker } from '@/Editor/Components/FilePicker'; import { PasswordInput } from '@/AppBuilder/Widgets/PasswordInput'; import { EmailInput } from '@/AppBuilder/Widgets/EmailInput'; +import { PhoneInput } from '@/AppBuilder/Widgets/PhoneInput'; // import { Calendar } from '@/Editor/Components/Calendar'; // import { Listview } from '@/Editor/Components/Listview'; import { IFrame } from '@/Editor/Components/IFrame'; @@ -120,6 +121,7 @@ export const AllComponents = { FilePicker, PasswordInput, EmailInput, + PhoneInput, Calendar, IFrame, CodeEditor, diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js index 57ee6b842f..249c3b175f 100644 --- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js @@ -1845,6 +1845,7 @@ export const createComponentsSlice = (set, get) => ({ 'TextInput', 'PasswordInput', 'EmailInput', + 'PhoneInput', 'NumberInput', 'DropdownV2', 'MultiselectV2', diff --git a/server/src/modules/apps/services/widget-config/index.js b/server/src/modules/apps/services/widget-config/index.js index 968fafac40..2e0840d7b9 100644 --- a/server/src/modules/apps/services/widget-config/index.js +++ b/server/src/modules/apps/services/widget-config/index.js @@ -59,6 +59,7 @@ import { datetimePickerV2Config } from './datetimepickerV2'; import { datePickerV2Config } from './datepickerV2'; import { timePickerConfig } from './timepicker'; import { emailinputConfig } from './emailinput'; +import { phoneinputConfig } from './phoneinput'; const widgets = { buttonConfig, @@ -75,6 +76,7 @@ const widgets = { datePickerV2Config, timePickerConfig, emailinputConfig, + phoneinputConfig, checkboxConfig, radiobuttonConfig, //!Depreciated radiobuttonV2Config, diff --git a/server/src/modules/apps/services/widget-config/phoneinput.js b/server/src/modules/apps/services/widget-config/phoneinput.js new file mode 100644 index 0000000000..c1567a9b87 --- /dev/null +++ b/server/src/modules/apps/services/widget-config/phoneinput.js @@ -0,0 +1,303 @@ +export const phoneinputConfig = { + name: 'PhoneInput', + displayName: 'Phone Input', + description: 'Phone input field', + component: 'PhoneInput', + 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 your input', + }, + }, + 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: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, + 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: 'disable', + displayName: 'Disable(deprecated)', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'visibility', + displayName: 'Visibility(deprecated)', + params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + 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 your phone' }, + 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: '#CFD3D859' }, + 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: 'IconHome2' }, + iconVisibility: { value: false }, + }, + }, +};