Simulator.Company scripts (1.0.0)

Download OpenAPI specification:Download

Support: support@simulator.company URL: https://simulator.company

get page

json

The request is sent to the corezoid process before the page is loaded. The corezoid process decides whether to display the requested page or to redirect the user to another page. Optionally, data for dynamic injection into the page body can be sent in the response.

Request Body schema: application/json

timeout	number Default: 30
	Array of objects The list of request results

Responses

Request samples

Payload

Content type

application/json

{"timeout": 30,
"ops": [{"conv_id": "{{CONV_ID}}",
"company_id": "{{COMPANY_ID}}",
"type": "create",
"obj": "task",
"data": {"body": {"page": "index",
"context": {"actorId": "111",
"rootActorId": "123",
"appId": "124",
"timeZoneOffset": -120
},
"query": { }
},
"path": "/get",
"sessionData": {"userInfo": {"id": "12",
"nick": "John Doe",
"login": "john.doe@corezod.com"
}
}
}
}
]
}

Response samples

Content type

application/json

Example

{"code": 200,
"data": {"viewModel": {"key": "value"
},
"language": "language"
}
}

send form

json

The request is sent to the Corezoid process when a button is clicked or when interacting with a component which submitOnChange property is set to true. The request's body contains all information about the component that initiated the request and the values of all fields in the current form. The Corezoid process makes decisions regarding changes on the existing page, displaying notifications, or redirecting the user to another page.

Request Body schema: application/json

timeout	number Default: 30
	Array of objects The list of request results

Responses

Request samples

Payload

Content type

application/json

{"timeout": 30,
"ops": [{"conv_id": "{{CONV_ID}}",
"company_id": "{{COMPANY_ID}}",
"type": "create",
"obj": "task",
"data": {"body": {"page": "index",
"query": { },
"context": {"actorId": "111",
"rootActorId": "123",
"appId": "124",
"timeZoneOffset": -120
},
"formId": "logIn",
"sectionId": "credentials",
"buttonId": "submit",
"buttonData": {"action": "submitOnScroll",
"length": 10
},
"data": {"login": "admin",
"password": "qwerty"
}
},
"path": "/send",
"sessionData": {"userInfo": {"id": "12",
"nick": "John Doe",
"login": "john.doe@corezod.com"
}
}
}
}
]
}

Response samples

Page

Description

All content is located on the page. Each page is a folder with a unique name and two files inside: "config" and "locale". The config file is a JSON file with two main properties: "grid" and "forms". In the "grid" property, we can adjust the arrangement of elements on the page. There are two options for placing content: "two_column" and "one_column". In the locale file, we can set up localization for the page.

Two column grid

One column grid

Configuration

	Array of objects (Form)
	object
	Array of objects (notification)
query	object Query string parameters
styleClass	string css class that is defined in 'styles.css'

{"forms": [{"id": "string",
"title": "string",
"visibility": "visible",
"grid": {"type": "one_column",
"components": { },
"styleClass": "my-custom-class"
},
"sections": [{"id": "string",
"type": "body",
"visibility": "visible",
"styleClass": "my-custom-class",
"header": [{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}
],
"modalHeader": [{ }
],
"contentLoop": [{"key": "value"
}
],
"content": [{ }
]
}
]
}
],
"grid": {"type": "one_column",
"components": { },
"header": {"class": "string"
},
"sideBar": {"components": {"center": ["id1"
],
"footer": ["id1"
],
"header": ["id1"
]
},
"styleClass": "my-custom-class"
}
},
"notifications": [{"type": "success",
"title": "Error",
"helperText": "api timeout",
"expire": "auto"
}
],
"query": {"key": "value"
},
"styleClass": "my-custom-class"
}

Form

Description

The form is filled with sections, and those, in turn, with components. Forms, sections, and components have the "visibility" property, which allows for flexible layout customization. Forms are used to send a request to Corezoid when a button is clicked, provided all mandatory fields are filled and all fields are checked. Forms also offer the ability to further customize the arrangement of sections using the "grid" property. There are two types: "two_column" and "one_column".

Two column grid

One column grid

Configuration

id	string
title	string
visibility	string Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
	object (grid)
	Array of objects (Container for grouping the components)

{"id": "string",
"title": "string",
"visibility": "visible",
"grid": {"type": "one_column",
"components": { },
"styleClass": "my-custom-class"
},
"sections": [{"id": "string",
"type": "body",
"visibility": "visible",
"styleClass": "my-custom-class",
"header": [{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}
],
"modalHeader": [{ }
],
"contentLoop": [{"key": "value"
}
],
"content": [{ }
]
}
]
}

Button

Description

Buttons allow users to take actions and make choices with a single tap.
Buttons communicate the actions that users can perform. They are usually placed throughout your user interface in areas such as:

- Modal windows
- Forms
- Cards

Default button

Default buttons are of high emphasis and are distinguished by their use of elevation and fill. They contain actions that are essential to your app.

Text button

Text buttons are commonly used for less prominent actions, including those found in dialogs and cards. In cards, text buttons assist in maintaining focus on the card's content.

Secondary button

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Tertiary button

Tertiary buttons are low-emphasis buttons that represent actions of minimal importance within an app.

They serve as a less prominent option compared to other button types.

Quaternary button

Quaternary buttons are also low-emphasis buttons, designed for actions of even lesser importance in an app.

They serve as a straight alternative to tertiary buttons, providing an even lower level of emphasis in comparison to secondary or text buttons.

Button with context menu

Menus display a list of choices on temporary surfaces. A menu displays a list of choices on a temporary surface. It appears when the user interacts with a button.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "button" Class of the component
type	string Default: "default" default default text secondary tertiary quaternary
tooltip	string Tooltips display informative text when users hover over an element.
	object extra settings
title	string String with bbcode

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "button",
"type": "default",
"tooltip": "tooltip text",
"extra": {"url": "http://127.0.0.1:3000",
"action": "logout",
"icon": "phone",
"rounded": false,
"mobileVisible": false,
"request": {"method": "get",
"url": "http://127.0.0.1:3000"
},
"autoSubmit": {"interval": 10,
"maxCount": 3
},
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
},
"title": "Button title"
}

Check

Description

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	boolean Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "check" Class of the component
title	string Title text

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": true,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "check",
"title": "Element title"
}

Toggle

Description

Toggle the state of a single setting on or off.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	boolean Default: false Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "toggle" Class of the component
title	string Title text
align	string Enum: "left" "right" "center" Horizontal alignement
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": false,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "toggle",
"title": "Element title",
"align": "left",
"extra": {"size": "medium"
}
}

Slider

Description

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Default slider

The "Default slider" component allows users to make selections from a range of values.

SkillBar slider

The "SkillBar slider" component allows users to show the progress from a range of values. There is no any handles, it`s used only for view.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "slider" Class of the component
value	string Value of the slider
type	string Default: "default" Enum: "default" "skillBar" Type of the slider
title	string Title text
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "slider",
"value": "0",
"type": "default",
"title": "Element title",
"submitOnChange": false,
"extra": {"min": 0,
"max": 100,
"step": 1,
"measure": "USD",
"dots": false
}
}

Label

Description

Labels allow the user to show information to user.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "label" Class of the component
tooltip	string Tooltips display informative text when users hover over an element.
value	string String with bbcode
align	string Enum: "left" "right" "center" Horizontal alignement

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}

Divider

Description

A divider is a thin line that groups content in lists and layouts. Dividers separate content into clear groups.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "divider" Class of the component

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "divider"
}

Image

Description

“Image” allows the user to display images to other users.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "image" Class of the component
value required	string url, or base64
align	string Enum: "left" "right" "center" Horizontal alignement
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "image",
"value": "https://corezoid.com/logo.png",
"align": "left",
"extra": {"alt": "Logo"
}
}

File

Description

The "File" component allows the user to view a file by clicking a button. After clicking, a modal window will open displaying the file specified in the configuration.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "file" Class of the component
required	object
align	string Enum: "left" "right" "center" Horizontal alignement

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "file",
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"align": "left"
}

Carousel

Description

The "Carousel" component allows the user to display an array of files. When clicking on an icon representing a file, the same modal window as the one triggered by the "File" component will appear, displaying the selected file.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
type	string Default: "default" Enum: "default" "preview" Visualization type : default - list of options only preview - the selected option will be displayed in a preview
class required	string Value: "carousel" Class of the component
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
	object (File object)
required	Array of objects

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"type": "default",
"class": "carousel",
"submitOnChange": false,
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"options": [{"title": "Element title",
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
}
}
]
}

Copy

Description

The "Copy" icon allows the user to copy information into the clipboard.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
title	string This value is used as a title for the copy chip
class required	string Value: "copy" Class of the component
tooltip	string Tooltips display informative text when users hover over an element.
value	string Value that will be copied to the clipboard
align	string Enum: "left" "right" "center" Horizontal alignement
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"title": "ID",
"class": "copy",
"tooltip": "tooltip text",
"value": "LoremIpsulum",
"align": "left",
"extra": {"notificationText": "Copied to clipboard"
}
}

Upload

Description

The "Upload" component allows the user to upload files to your app. After clicking, the system file explorer will appear, allowing the user to choose a file to upload.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "upload" Class of the component
title	string Title text
align	string Enum: "left" "right" "center" Horizontal alignement
type	string Default: "default" Enum: "default" "webcam" Component type : default - upload component with preview, file will be selected from the hard disk webcam - upload component with preview, screenshot will be made from webcam
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"id": 34,
"fileName": "ADSEFEFJJ12314FGG",
"type": "application/pdf",
"size": "1024",
"title": "File.pdf"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "upload",
"title": "Element title",
"align": "left",
"type": "default",
"extra": {"accept": "image/png,application/pdf",
"minSize": "10",
"maxSize": "1024",
"errorMsgInvalidFileType": "Invalid file type",
"errorMsgMinImageSize": "File is to small",
"errorMsgMaxImageSize": "File is to large",
"api": {"downloadUrl": "https://api.example.com/download",
"uploadUrl": "https://api.example.com/upload",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
},
"screenshotFormat": "image/png",
"videoConstraints": {"width": 1280,
"height": 720,
"facingMode": "user"
},
"mirrored": false
}
}

Attachment

Description

Attachment allow user to upload multiply files to your app. After click the system file explorer will appear, where user can choose file to upload or use drag&drop

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	any Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "attachment" Class of the component
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": null,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "attachment",
"extra": {"multiple": true,
"label": "Drop files to attach, or",
"browseLinkLabel": "browse",
"accept": "image/png,application/pdf",
"maxFileSize": "1024",
"api": {"downloadUrl": "https://api.example.com/download",
"uploadUrl": "https://api.example.com/upload",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
}
}
}

Widget

Description

We have integrated with Twilio video and Onfido.

Default widget

The "Widget" component allows the user to use the HTML iframe tag.

Web comments widget

Web comments allow users to add commentaries on a page.

Follow the next steps to enable this feature:

1. Go to Simulator.company
2. Select "Communications"
3. Choose "Comments Widget"
4. Create Comments Widget actor
5. Copy actorId
6. Go to script
7. Insert the actorId into the `ctrlSetting.webComments.{{actorId}}` widget section.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "widget" Class of the component
type	string Default: "default" default default twilio onfido webComments amazonConnect
submitOnChange	boolean Enum: true false if true, changes of the element's value will trigger /send request.
required	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "widget",
"type": "default",
"submitOnChange": false,
"extra": {"widgetUrl": "https://doc.corezoid.com/docs/quick-start",
"allowFullScreen": false,
"allow": "camera; microphone"
}
}

Edit

Description

The "Edit" component allows users to enter and edit text. It enables users to input text within a user interface. Typically, "Edit" components are used in forms and dialogs.

Text edit

The "Text Edit" component allows users to input any strings of text.

Int edit

The "Int Edit" component allows users to input only integer values.

Float edit

The "Float Edit" component allows users to input both integer and floating-point numbers.

Phone edit

The "Phone Edit" component offers users a user-friendly form for inputting phone numbers.

Email edit

he "Email Edit" component includes built-in email validation and will display an error if any mistakes are made while typing an email address.

Password edit

The "Password Edit" component allows users to type a password where each symbol is replaced with an asterisk (*).

Multiline edit

The "multiline" property transforms the text field into a multiline element. You can provide the number of rows in the props.

Date edit

The "Date Edit" component provides users with a convenient calendar interface to choose a date.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "edit" Class of the component
type	string Default: "text" text text int float phone email password multiline date
title	string Title text
autoFocus	boolean Default: false
placeholder	string
	object
mask	string The mask pattern (could only be applied on input), where definitions are: 0 - any digit a - any letter * - any char other chars which is not in custom definitions supposed to be fixed [] - make input optional {} - include fixed part in unmasked value ` - prevent symbols shift back
value	string Value of the component
regexp	string
	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "edit",
"type": "text",
"title": "Element title",
"autoFocus": false,
"placeholder": "Enter your name",
"maskOptions": {"placeholderChar": "_",
"lazy": true
},
"mask": "+{38}(000)000-00-00",
"value": "string",
"regexp": ["^a-z"
],
"extra": {"length": 2
}
}

Select

Description

Select components are used for collecting user-provided information from a list of options.

Default select

Menus are positioned under their emitting elements, unless they are located close to the bottom of the viewport.

Autocomplete select

The autocomplete select is a regular text input that is enhanced with a panel of suggested options.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	string Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "select" Class of the component
type	string (Type of the select component) Default: "default" default default autocomplete
title	string Title text
placeholder	string
resettable	boolean (If true, reset button will be displayed) Default: false
submitOnScroll	boolean (If true, /send request will be triggered on scroll) Default: false
	Array of objects

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": "option-id",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "select",
"type": "default",
"title": "Element title",
"placeholder": "Select your favorite number",
"resettable": false,
"submitOnScroll": false,
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}

Multiselect

Description

The “Multiselect” component can manage multiple selections simultaneously.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	Array of objects Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "multiselect" Class of the component
title	string Title text
placeholder	string
	Array of objects

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": [{"value": "option-1",
"title": "option one"
}
],
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "multiselect",
"title": "Element title",
"placeholder": "Select your favorite numbers",
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible",
"tooltip": "tooltip text"
}
]
}

Radio

Description

The “Radio” component enables the user to select a single option from a set. Radio buttons are used when the user should be able to view all available options

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	string Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "radio" Class of the component
	object extra settings
title	string Title text
align	string (alignement) Default: "left" Enum: "left" "right" "center"
	Array of objects

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": "option-id",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "radio",
"extra": {"direction": "column"
},
"title": "Element title",
"align": "left",
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}

Phone

Description

The "Phone Edit" component offers users a user-friendly form for inputting phone numbers.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "phone" Class of the component
title	string Title text
	object
regexp	string (Regular expression for validation of the countryCode+number)
	Array of objects
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"countryCode": "380",
"number": "3567322"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "phone",
"title": "Element title",
"placeholder": {"countryCode": "380",
"number": "3567322"
},
"regexp": "^[0-9]{9,17}$",
"options": [{"title": "+380",
"value": "380"
}
],
"extra": {"placeholder": {"countryCode": "code",
"number": "number"
}
}
}

Tab

Description

Tabs provide a convenient way to explore and switch between various views. They help organize and facilitate navigation between groups of related content that exist at the same hierarchical level.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "tab" Class of the component
value	string (Selected tab id)
align	string Enum: "left" "right" "center" Horizontal alignement
	Array of objects
submitOnChange	boolean Enum: true false if true, changes of the element's value will trigger /send request.

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "tab",
"value": "first_tab",
"align": "left",
"options": [{"title": "First tab",
"value": "first_tab",
"error": false,
"visibility": "visible",
"styleClass": "my-custom-class"
}
],
"submitOnChange": false
}

Comments

Description

Component comments allow user to show comments with user name, description, text, date of comment and location.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "comments" Class of the component
placeholder	string (Placeholder text)
	Array of objects (message)

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "comments",
"placeholder": "There is no messages yet",
"value": [{"date": "01.01.2021 14:01",
"description": "description",
"location": "location",
"value": "Text 1",
"user": {"name": "John Doe"
}
}
]
}

Table

Description

Tables present datasets in an organized format that can be fully customized. They showcase data in a manner that's easy to scan, so that users can look for patterns and insights. Tables can be seamlessly integrated into primary content, such as modal windows, and may include:

- Corresponding visual representations
- Navigation options
- Tools for querying and manipulating data

Default table

A simple example with no frills.

Radio table

Radio table allows the user to select one row from a table.

Check table

Checkboxes allow the user to select one or more rows from a table.

Group table

Group tables allow the user to group table rows based on common attributes.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	any Value: "table"
type	string Default: "default" The type of the table default default radio check group
	Array of objects
	Array of objects (Table row)
submitOnScroll	boolean (If true, /send request will be triggered on scroll) Default: false
	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "table",
"type": "default",
"head": [{"value": "firstName",
"title": "First name",
"visibility": "visible",
"styleClass": "my-custom-class"
}
],
"body": [{"value": "firtsRow",
"groupValue": "string",
"styleClass": "my-custom-class",
"clickable": true,
"options": [{"value": "firstName",
"title": "John",
"button": {"title": "Edit",
"visibility": "visible",
"extra": {"icon": "phone",
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}
},
"file": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"check": {"value": false,
"visibility": "visible",
"error": false
},
"copy": {"value": "1234567890",
"title": "Copy",
"tooltip": "CopyTooltip",
"visibility": "visible",
"extra": {"notificationText": "Copied!"
}
},
"styleClass": "my-custom-class"
}
]
}
],
"submitOnScroll": false,
"extra": {"page": "1",
"totalPages": "10",
"rowsPerPage": "10",
"rowsPerPageOptions": ["10",
"20",
"30"
],
"rowsPerPageTitle": "Row per page:",
"rowsPerPageDescr": "1-10 of 100",
"sort": {"value": "firstName",
"order": "desc"
}
}
}

Stepper

Description

The “Stepper” component enables exploring and switching between different views. The Stepper organizes and allows navigation between related groups of content that are located at the same hierarchy level. It provides the same functionality as the “Tab” component, however with another visualization.

Default stepper

Default stepper is used for desktop devices

Mobile stepper

Mobile stepper is used for mobile devices

Example

You want the sidebar stepper to be hidden on mobile devices and the main layout stepper to be visible on mobile devices.

By setting `mobileVisible: false` for the sidebar stepper and `mobileVisible: true` for the main layout stepper, you are configuring the behavior so that the sidebar stepper will be hidden on mobile devices and the main layout stepper will be visible on mobile devices.This setup will result in an auto-closing sidebar stepper (hidden on mobile) and an auto-opening stepper on the main layout (visible on mobile).

Desktop layout

Mobile layout

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "stepper" Class of the component
type	string Default: "default" default default mobile
title	string Title text
value	string value of the component
align	string (alignement) Default: "left" Enum: "left" "right" "center"
	object extra settings
	Array of objects

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "stepper",
"type": "default",
"title": "Element title",
"value": "option-id",
"align": "left",
"extra": {"mobileVisible": false
},
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible",
"completed": false
}
]
}

Otp

Description

The "OTP" component allows users to input a one-time password (OTP).

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "otp" Class of the component
type	string Default: "text" Enum: "text" "int" With "int" type sets the keyboard to numeric input mode on mobile devices.
title	string Title text
autoFocus	boolean Default: false
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"otp-0": "0",
"otp-1": "1",
"otp-2": "2",
"otp-3": "3"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "otp",
"type": "text",
"title": "Element title",
"autoFocus": false,
"extra": {"length": 4
}
}

Signature

Description

The "Signature" component allows users to create handwritten signatures and submit them as part of a form.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "signature" Class of the component
	object Value of the component
title	string Title text
	object extra settings
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "signature",
"value": null,
"title": "Element title",
"extra": {"api": {"url": "https://api.example.com",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
},
"strokeStyle": {"strokeColor": "#000000",
"strokeWidth": 5,
"lineCap": "round"
},
"clearButtonTitle": "Clear",
"saveButtonTitle": "Save"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false
}

viewModel

Injection of variable value into the page config: "Your personal discount is {{variableName}} %"

Example

{
  "code":200,
  "viewModel":{ "value": "10" }
}
+
{
  "id":"label",
  "value":"Your personal discount is {{value}} %"
}
=
{
  "id":"label",
  "value":"Your personal discount is 10 %"
}

locale

Page localization is stored separately from the page configurtion

  **Example**

  /locale = common keys for all pages.
  /pages/index/locale = keys for "index" page only.

  this two objects will be merged together, and all keys founded in page config for 'index' page will be replaced with values.

  ```javascript
  {
    "code":200,
    "viewModel":{ "localeKey": "[[sayHello]], [[sayGoodbye]]", "name": "world" },
    "language": "en",
  }

  +

  /pages/index/locale

  {
    "sayHello": "Hello {{name}}",
    "sayGoodbye": {
      "en": "goodbye!",
      "uа": "до побачення!"
    }
  }

  +

  /pages/index/config

  {
    "id":"label",
    "value":"[[localeKey]]"
  }

  =

  {
    "id":"label",
    "value":"Hello world, goodbye!"
  }
  ```

definitions

Forms, sections, components that are defined in /definitions, can be reused across the pages.

Example

Folder structure:

/definitions
  info
  test
  next

File name equals value of $ref attribute

Form reference:

  {
    "id": "info_test",
    "type": "body",
    "$ref": "#/info"
  }

Section reference:

  {
    "id": "info_test",
    "type": "body",
    "sections": [
      {
        "id": "common",
        "$ref": "#/test"
      }
    ]
  }

Button reference:

    {
      "class": "button",
      "$ref": "#/next"
    }

bbcode

Bbcode - it is a string with pseudo code, that will be converted into HTML.

bbcode	HTML
[b]Bold text[/b]	Bold text
[i]Italic text[/i]	Italic text
[u]Underline text[/u]	Underline text
[ul][]Unordered list[/][/ul]	Undordered list
[iurl=log_in]Internal link[/iurl]	Internal link
[url=https://simulator.company] External link[/url]	External link
[div]New line[/div]	New line
[br]
[color=red]Text color[/color]	Text color
[size=12]Font size[/size]	Font size
[bg=green]Text back ground[/bg]	Text back ground

style

Each component has a default class that can be accessed and styled.
Additionally, to style a specific element, use the "styleClass" property in the component.
All style changes should be made in the "style.css" file.

.yourClass {
  /* your styles */
}

To style scripts, we use Less - language extension for css.
The following example shows how you can change the color theme of a script:

/* Colors */
@fontColor: #000000;
@secondaryColor: #EC9704;
@primaryColor: #F7C815;
@primaryOpacityColor: rgba(236,151,2, 0.5);

/* Button */
.button {
  &__menu{
    background-color: @primaryOpacityColor !important;
    &__item{
      background-color: @primaryColor;
    }
  }
/* Default button*/
  &__default {
    background-color: @primaryColor;
    border-color: @primaryColor;
    color: @fontColor;

    &:hover,
    &:focus {
      background-color: @secondaryColor !important;
      border-color: @secondaryColor !important;
      color: @fontColor !important;
    }
  }
  /* Text button */
  &__text {
    color: @primaryColor;

    &:hover,
    &:focus {
      background-color: @primaryOpacityColor !important;
      border-color: @primaryOpacityColor !important;
      color: @fontColor !important;
    }
  }
  /* Secondary button */
  &__secondary {
    border-color: @primaryColor;
    color: @primaryColor;

    &:hover,
    &:focus {
      background-color: @primaryOpacityColor !important;
      border-color: @primaryColor !important;
      color: @fontColor !important;
    }
  }
  /* Tertiary button */
  &__tertiary {
    color: @fontColor;

    &:hover,
    &:focus {
      background-color: @primaryOpacityColor !important;
      border-color: @primaryOpacityColor !important;
      color: @secondaryColor !important;

      .fill{
        fill: @secondaryColor !important;
      }
    }
  }
  /* Quaternary button */
  &__quaternary {
    background-color: @primaryOpacityColor;
    border-color: @primaryColor;
    color: @secondaryColor;

    &:hover,
    &:focus {
      background-color: @primaryOpacityColor !important;
      border-color: @primaryOpacityColor !important;
      color: @secondaryColor !important;
    }
  }
}

/* Check */
.check {
  .fill {
    fill: @primaryColor !important;
  }
}

/* Label */
.label{

}

/* Divider */
.divider{

}

/* Image */
.image{

}

/* File */
.file{

}

/* Carousel */
.carousel{

}

/* Copy */
.copy{
  &__container{
    &:hover,
    &:focus {
      .fill{
        fill: @primaryColor
      }
    }
  }
}

/* Upload */
.upload {
  &__corner {
    border-color: @primaryColor !important;
  }

  &__icon {
    path {
      fill: @primaryColor !important;
    }
  }
}

/* Widget */
.widget{

}

/* Edit */
.edit.focus {
  .field {
    border-color: @primaryColor !important;
  }

  .label {
    color: @primaryColor !important;
  }
}

.calendar {
  background-color: @primaryOpacityColor !important;
  .selected {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
  }
  .button {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
  }
}

/* Select */
.select {
  .focus {
    .field {
      border-color: @primaryColor !important;
    }

    .label {
      color: @primaryColor !important;
    }
  }
}

/* Multiselect */
.multiselect.focus {
  .field {
    border-color: @primaryColor !important;
  }

  .label {
    color: @primaryColor !important;
  }

  .chip {
    border-color: @primaryColor !important;
  }
}

/* Radio */
.radio {
  .fill {
    fill: @primaryColor !important;
  }
}

/* Phone */
.phone{

}

/* Tab */
.tab {
  &__item {
    border-color: @primaryColor !important;

    span {
      color: @primaryColor !important;
    }
  }
}

/* Comments */
.comments{

}

/* Table */
.table {
  .fill {
    fill: @primaryColor !important;
  }

  &__pagination {
    &__button {
      color: @primaryColor !important;
      border-color: @primaryColor !important;
    }
  }

  &__button{
    border-color: @primaryColor;
    color: @primaryColor;

    &:hover,
    &:focus {
      background-color: @primaryOpacityColor !important;
      border-color: @primaryColor !important;
      color: @fontColor !important;
    }
  }
}

/* Stepper */
.stepper{

}
.stepperMobile{

}

/* Otp */
.otp {
  &__edit.focus {
    .field {
      border-color: @primaryColor !important;
    }
  }
}

/* Change the color of the progress bar */
.progressBar {
  color: @primaryColor !important;
}

/* Section */
.section{
  .close_btn{
    .fill{
      fill: @primaryColor !important;
    }
  }
  &__modal__header{
    background-color: @primaryColor;
  }
}

/* Modal width */
.section {
  &.modal {
    .section__wrap {
     max-width: 700px;
    }
  }
}

/* Slider */
.slider{
  .rc-slider-track{
    background-color: @primaryColor;
  }
  .rc-slider-handle{
    background-color: @primaryColor;
  }
  .rc-slider-dot-active{
    border-color: @primaryColor;
  }
  .rc-slider-rail {
    height: 20px;
    background-color: grey;
    border-radius: 0;
  }
  .slider__footer {
    display: none;
    margin-top: 8px;
  }
  .rc-slider-dot {
    height: 24px;
    width: 8px;
    border-radius: 4px;
  }
  .rc-slider-step {
    height: 20px;
  }
}

/* Toggle */
.toggle{
  &__button{
    border-color: @primaryColor !important;
    .active{
      background-color: @primaryColor !important;
    }
  }
}
/* Attachment */
.attachment{
  background-color: @secondaryColor !important;
}

/* Signature */
.signature{
  &__content{
    background-color: @secondaryColor !important;
  }
}