mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 08:58:26 +00:00
Config changes
This commit is contained in:
parent
45c7c60674
commit
07af772bd6
109 changed files with 386 additions and 787 deletions
|
|
@ -1 +1 @@
|
|||
Subproject commit 48b34618a96d70a64fa6579a54da941e457899d0
|
||||
Subproject commit 8abe6a26910d0e1758f5fa3684c81187afdb2e33
|
||||
|
|
@ -61,7 +61,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -74,7 +74,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -83,7 +83,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -92,7 +92,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
loaderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Loader color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -110,7 +110,7 @@ export const buttonConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' } },
|
||||
accordian: 'button',
|
||||
|
|
@ -219,10 +219,10 @@ export const buttonConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#FFFFFF' },
|
||||
borderColor: { value: '#4368E3' },
|
||||
borderColor: { value: 'var(--primary-brand)' },
|
||||
loaderColor: { value: '#FFFFFF' },
|
||||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#4368E3' },
|
||||
backgroundColor: { value: 'var(--primary-brand)' },
|
||||
iconColor: { value: '#FFFFFF' },
|
||||
direction: { value: 'left' },
|
||||
padding: { value: 'default' },
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -76,7 +76,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -108,7 +108,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected text colour',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -116,11 +116,11 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
selectedBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#007bff',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -147,7 +147,7 @@ export const buttonGroupConfig = {
|
|||
borderRadius: { value: '{{4}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
selectedTextColor: { value: '#FFFFFF' },
|
||||
selectedBackgroundColor: { value: '#4368E3' },
|
||||
selectedBackgroundColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,13 +39,13 @@ export const chartConfig = {
|
|||
},
|
||||
},
|
||||
markerColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Marker color',
|
||||
validation: {
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
defaultValue: '#CDE1F8',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
showAxes: {
|
||||
|
|
@ -134,7 +134,7 @@ export const chartConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
},
|
||||
|
|
@ -192,7 +192,7 @@ export const chartConfig = {
|
|||
},
|
||||
properties: {
|
||||
title: { value: 'This title can be changed' },
|
||||
markerColor: { value: '#CDE1F8' },
|
||||
markerColor: { value: 'var(--primary-brand)' },
|
||||
showAxes: { value: '{{true}}' },
|
||||
showGridLines: { value: '{{true}}' },
|
||||
plotFromJson: { value: '{{false}}' },
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export const checkboxConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -78,7 +78,7 @@ export const checkboxConfig = {
|
|||
accordian: 'label',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -86,7 +86,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
checkboxColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Checked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -94,7 +94,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
uncheckedColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Unchecked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -102,7 +102,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -183,7 +183,7 @@ export const checkboxConfig = {
|
|||
styles: {
|
||||
disabledState: { value: '{{false}}' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
checkboxColor: { value: '#4368E3' },
|
||||
checkboxColor: { value: 'var(--primary-brand)' },
|
||||
uncheckedColor: { value: '#E4E7EB' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
handleColor: { value: '#FFFFFF' },
|
||||
|
|
|
|||
|
|
@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#375FCF',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
color: { value: '' },
|
||||
color: { value: 'var(--primary-brand)' },
|
||||
textColor: { value: '' },
|
||||
textSize: { value: '{{16}}' },
|
||||
strokeWidth: { value: '{{8}}' },
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export const colorPickerConfig = {
|
|||
description: 'Choose colors from a palette',
|
||||
component: 'ColorPicker',
|
||||
properties: {
|
||||
defaultColor: { type: 'color', displayName: 'Default color' },
|
||||
defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
|
||||
},
|
||||
defaultSize: {
|
||||
width: 9,
|
||||
|
|
@ -14,7 +14,9 @@ export const colorPickerConfig = {
|
|||
{
|
||||
displayName: 'Set Color',
|
||||
handle: 'setColor',
|
||||
params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
|
||||
params: [
|
||||
{ handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
|
||||
],
|
||||
},
|
||||
],
|
||||
others: {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export const containerConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -80,7 +80,7 @@ export const containerConfig = {
|
|||
accordian: 'container',
|
||||
},
|
||||
headerBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -89,7 +89,7 @@ export const containerConfig = {
|
|||
accordian: 'header',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -169,8 +169,8 @@ export const datePickerV2Config = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -220,31 +220,31 @@ export const datePickerV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -257,7 +257,7 @@ export const datePickerV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
|
|||
|
|
@ -199,8 +199,8 @@ export const daterangepickerConfig = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -250,31 +250,31 @@ export const daterangepickerConfig = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -287,7 +287,7 @@ export const daterangepickerConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
|
|||
|
|
@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const dividerConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
dividerColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Divider color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export const dropdownConfig = {
|
|||
defaultValue: true,
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected text color',
|
||||
validation: {
|
||||
schema: {
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export const dropdownV2Config = {
|
|||
},
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -153,31 +153,31 @@ export const dropdownV2Config = {
|
|||
},
|
||||
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -190,7 +190,7 @@ export const dropdownV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ export const formConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -267,7 +267,7 @@ export const formConfig = {
|
|||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export const iconConfig = {
|
|||
},
|
||||
styles: {
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export const imageConfig = {
|
|||
accordian: 'Image',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -153,7 +153,7 @@ export const imageConfig = {
|
|||
accordian: 'Container',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const kanbanConfig = {
|
|||
styles: {
|
||||
disabledState: { type: 'toggle', displayName: 'Disable' },
|
||||
visibility: { type: 'toggle', displayName: 'Visibility' },
|
||||
accentColor: { type: 'color', displayName: 'Accent color' },
|
||||
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
|
|
@ -157,7 +157,7 @@ export const kanbanConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
accentColor: { value: '#4d72fa' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
|
|||
visibility: { type: 'toggle', displayName: 'Visibility' },
|
||||
width: { type: 'number', displayName: 'Width' },
|
||||
minWidth: { type: 'number', displayName: 'Min Width' },
|
||||
accentColor: { type: 'color', displayName: 'Accent color' },
|
||||
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
|
||||
},
|
||||
exposedVariables: {
|
||||
columns: {},
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const linkConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export const listviewConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -128,7 +128,7 @@ export const listviewConfig = {
|
|||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export const modalConfig = {
|
|||
},
|
||||
styles: {
|
||||
headerBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Header background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -89,7 +89,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
headerTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Header title color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -97,7 +97,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
bodyBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Body background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -121,7 +121,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
triggerButtonBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Trigger button background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -129,7 +129,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
triggerButtonTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Trigger button text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -175,7 +175,7 @@ export const modalConfig = {
|
|||
bodyBackgroundColor: { value: '#ffffffff' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
visibility: { value: '{{true}}' },
|
||||
triggerButtonBackgroundColor: { value: '#4D72FA' },
|
||||
triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
|
||||
triggerButtonTextColor: { value: '#ffffffff' },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ export const multiselectV2Config = {
|
|||
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -218,32 +218,32 @@ export const multiselectV2Config = {
|
|||
},
|
||||
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -256,7 +256,7 @@ export const multiselectV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -365,7 +365,7 @@ export const multiselectV2Config = {
|
|||
icon: { value: 'IconHome2' },
|
||||
iconVisibility: { value: false },
|
||||
iconColor: { value: '#6A727C' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export const numberinputConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -124,31 +124,31 @@ export const numberinputConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
|
||||
accordian: 'field',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -161,7 +161,7 @@ export const numberinputConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
|
||||
accordian: 'field',
|
||||
|
|
@ -279,7 +279,7 @@ export const numberinputConfig = {
|
|||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
errTextColor: { value: '#D72D39' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
color: { value: '#1B1F24' },
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export const passinputConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -136,31 +136,31 @@ export const passinputConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
|
||||
accordian: 'field',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -173,7 +173,7 @@ export const passinputConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
|
||||
accordian: 'field',
|
||||
|
|
@ -278,7 +278,7 @@ export const passinputConfig = {
|
|||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
errTextColor: { value: '#D72D39' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
iconColor: { value: '#CFD3D859' },
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
|
|||
},
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
switchOnBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Checked background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
|
|||
tooltipPlacement: 'bottom',
|
||||
},
|
||||
switchOffBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Unchecked background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
|
|||
tooltipPlacement: 'bottom',
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
optionsTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const radiobuttonConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -61,11 +61,11 @@ export const radiobuttonConfig = {
|
|||
},
|
||||
},
|
||||
activeColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Active color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#000000',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
|
|
@ -113,7 +113,7 @@ export const radiobuttonConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '' },
|
||||
activeColor: { value: '' },
|
||||
activeColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
styles: {
|
||||
lineColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Line color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -61,7 +61,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -69,7 +69,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
},
|
||||
trackColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Track color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -109,7 +109,7 @@ export const rangeSliderConfig = {
|
|||
styles: {
|
||||
lineColor: { value: '' },
|
||||
handleColor: { value: '' },
|
||||
trackColor: { value: '' },
|
||||
trackColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ export const spinnerConfig = {
|
|||
},
|
||||
},
|
||||
colour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Colour',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#0565ff',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
|
|
@ -54,7 +54,7 @@ export const spinnerConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
size: { value: 'sm' },
|
||||
colour: { value: '#0565ff' },
|
||||
colour: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const starratingConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Star color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -66,7 +66,7 @@ export const starratingConfig = {
|
|||
},
|
||||
},
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Label color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -55,22 +55,22 @@ export const statisticsConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
primaryLabelColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Primary label colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
|
||||
},
|
||||
primaryTextColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Primary text colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#000000' },
|
||||
},
|
||||
secondaryLabelColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Secondary label colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
|
||||
},
|
||||
secondaryTextColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Secondary text colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -45,15 +45,15 @@ export const stepsConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#000000',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -101,7 +101,7 @@ export const stepsConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
theme: { value: 'titles' },
|
||||
color: { value: '' },
|
||||
color: { value: 'var(--primary-brand)' },
|
||||
textColor: { value: '' },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export const tableConfig = {
|
|||
defaultValue: 'clientSide',
|
||||
},
|
||||
actionButtonBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -165,7 +165,7 @@ export const tableConfig = {
|
|||
},
|
||||
},
|
||||
actionButtonTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -293,7 +293,7 @@ export const tableConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -404,7 +404,7 @@ export const tableConfig = {
|
|||
accordian: 'Container',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -109,11 +109,11 @@ export const tabsConfig = {
|
|||
events: { onTabSwitch: { displayName: 'On tab switch' } },
|
||||
styles: {
|
||||
highlightColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Highlight color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#375FCF',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
|
|
@ -174,7 +174,7 @@ export const tabsConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
highlightColor: { value: '#375FCF' },
|
||||
highlightColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
tabWidth: { value: 'auto' },
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export const textConfig = {
|
|||
accordian: 'Text',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -185,7 +185,7 @@ export const textConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -195,7 +195,7 @@ export const textConfig = {
|
|||
colorPickerPosition: 'top',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export const textinputConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -132,13 +132,13 @@ export const textinputConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
|
|
@ -146,17 +146,17 @@ export const textinputConfig = {
|
|||
accentColor: {
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
|
||||
accordian: 'field',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -169,7 +169,7 @@ export const textinputConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
|
||||
accordian: 'field',
|
||||
|
|
@ -283,7 +283,7 @@ export const textinputConfig = {
|
|||
styles: {
|
||||
textColor: { value: '#1B1F24' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
errTextColor: { value: '#D72D39' },
|
||||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#fff' },
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const timelineConfig = {
|
|||
properties: {
|
||||
data: {
|
||||
value:
|
||||
"{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}",
|
||||
"{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
|
||||
},
|
||||
hideDate: { value: '{{false}}' },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export const timePickerConfig = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -215,31 +215,31 @@ export const timePickerConfig = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -252,7 +252,7 @@ export const timePickerConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
|
|||
|
|
@ -32,14 +32,14 @@ export const toggleswitchConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
},
|
||||
},
|
||||
toggleSwitchColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Toggle switch color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -75,7 +75,7 @@ export const toggleswitchConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '' },
|
||||
toggleSwitchColor: { value: '' },
|
||||
toggleSwitchColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export const toggleSwitchV2Config = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -79,7 +79,7 @@ export const toggleSwitchV2Config = {
|
|||
accordian: 'label',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -87,7 +87,7 @@ export const toggleSwitchV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
toggleSwitchColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Checked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -95,7 +95,7 @@ export const toggleSwitchV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
uncheckedColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Unchecked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -103,7 +103,7 @@ export const toggleSwitchV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -181,7 +181,7 @@ export const toggleSwitchV2Config = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#1B1F24' },
|
||||
toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility
|
||||
toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
|
||||
uncheckedColor: { value: '#E4E7EB' },
|
||||
borderColor: { value: '#E4E7EB' },
|
||||
handleColor: { value: '#FFFFFF' },
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ export const treeSelectConfig = {
|
|||
onUnCheck: { displayName: 'On uncheck' },
|
||||
},
|
||||
styles: {
|
||||
textColor: { type: 'color', displayName: 'Text Color' },
|
||||
checkboxColor: { type: 'color', displayName: 'Checkbox color' },
|
||||
textColor: { type: 'colorSwatches', displayName: 'Text Color' },
|
||||
checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' },
|
||||
visibility: { type: 'toggle', displayName: 'Visibility' },
|
||||
disabledState: { type: 'toggle', displayName: 'Disable' },
|
||||
},
|
||||
|
|
@ -71,7 +71,7 @@ export const treeSelectConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '' },
|
||||
checkboxColor: { value: '' },
|
||||
checkboxColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const verticalDividerConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
dividerColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Divider color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@ export const Modal = function Modal({
|
|||
display: visibility ? '' : 'none',
|
||||
'--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
|
||||
boxShadow,
|
||||
borderColor: 'var(--primary-brand)',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ export const DropDown = function DropDown({
|
|||
minWidth: 'max-content',
|
||||
}
|
||||
: {
|
||||
backgroundColor: state.value === currentValue ? '#7A95FB' : 'white',
|
||||
backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
|
||||
color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
|
||||
':hover': {
|
||||
backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect, useMemo, useRef } from 'react';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { toast } from 'react-hot-toast';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
|
|
@ -311,7 +312,11 @@ export const FilePicker = ({
|
|||
<section>
|
||||
<div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
|
||||
<input {...getInputProps()} />
|
||||
<FilePicker.Signifiers signifier={accepted} feedback={null} cls="spinner-border text-azure p-0" />
|
||||
<FilePicker.Signifiers
|
||||
signifier={accepted}
|
||||
feedback={null}
|
||||
cls="spinner-border text-azure p-0 spinner-border-filepicker"
|
||||
/>
|
||||
|
||||
{showSelectedFiles && !accepted ? (
|
||||
<FilePicker.AcceptedFiles width={width - 10} height={height}>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils';
|
|||
const CustomOption = (props) => {
|
||||
return (
|
||||
<Option {...props}>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex multiselct-widget-option">
|
||||
<FormCheck checked={props.isSelected} disabled={props?.isDisabled} />
|
||||
<span style={{ marginLeft: '5px' }}>
|
||||
{highlightText(props.label?.toString(), props.selectProps.inputValue)}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const TextArea = function TextArea({
|
|||
setExposedVariable('value', e.target.value);
|
||||
}}
|
||||
type="text"
|
||||
className="form-control textarea"
|
||||
className="form-control textarea textarea-widget"
|
||||
placeholder={properties.placeholder}
|
||||
style={{
|
||||
height,
|
||||
|
|
|
|||
|
|
@ -164,19 +164,25 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
|
|||
<div className="btn-list justify-content-end">
|
||||
{state === 'initial' && (
|
||||
<a
|
||||
className={`btn btn-primary${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
|
||||
className={`btn btn-primary timer-btn${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
|
||||
onClick={() => onStart()}
|
||||
>
|
||||
Start
|
||||
</a>
|
||||
)}
|
||||
{state === 'running' && (
|
||||
<a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onPause}>
|
||||
<a
|
||||
className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
|
||||
onClick={onPause}
|
||||
>
|
||||
Pause
|
||||
</a>
|
||||
)}
|
||||
{state === 'paused' && (
|
||||
<a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onResume}>
|
||||
<a
|
||||
className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
|
||||
onClick={onResume}
|
||||
>
|
||||
Resume
|
||||
</a>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,351 +0,0 @@
|
|||
export const timePickerConfig = {
|
||||
name: 'TimePicker',
|
||||
displayName: 'Time Picker',
|
||||
description: 'Choose date and time',
|
||||
component: 'TimePicker',
|
||||
defaultSize: {
|
||||
width: 10,
|
||||
height: 40,
|
||||
},
|
||||
validation: {
|
||||
minTime: {
|
||||
type: 'timepicker',
|
||||
placeholder: 'HH:mm',
|
||||
displayName: 'Min Time',
|
||||
},
|
||||
maxTime: {
|
||||
type: 'timepicker',
|
||||
placeholder: 'HH:mm',
|
||||
displayName: 'Max Time',
|
||||
},
|
||||
customRule: {
|
||||
type: 'code',
|
||||
displayName: 'Custom validation',
|
||||
},
|
||||
mandatory: {
|
||||
type: 'toggle',
|
||||
displayName: 'Make this field mandatory',
|
||||
},
|
||||
},
|
||||
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',
|
||||
},
|
||||
accordian: 'Data',
|
||||
},
|
||||
defaultValue: {
|
||||
type: 'code',
|
||||
displayName: 'Default value',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '00:00',
|
||||
},
|
||||
},
|
||||
isTimezoneEnabled: {
|
||||
type: 'toggle',
|
||||
displayName: 'Manage time zones',
|
||||
validation: { schema: { type: 'boolean' }, defaultValue: false },
|
||||
section: 'formatting',
|
||||
},
|
||||
loadingState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Loading state',
|
||||
validation: { schema: { type: 'boolean' }, defaultValue: true },
|
||||
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: true },
|
||||
section: 'additionalActions',
|
||||
},
|
||||
tooltip: {
|
||||
type: 'code',
|
||||
displayName: 'Tooltip',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: 'Enter tooltip text',
|
||||
},
|
||||
section: 'additionalActions',
|
||||
placeholder: 'Enter tooltip text',
|
||||
},
|
||||
},
|
||||
events: {
|
||||
onSelect: { displayName: 'On select' },
|
||||
onFocus: { displayName: 'On focus' },
|
||||
onBlur: { displayName: 'On blur' },
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
handle: 'setValue',
|
||||
displayName: 'Set value',
|
||||
params: [
|
||||
{ handle: 'value', displayName: 'Value' },
|
||||
{ handle: 'format', displayName: 'Format' },
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'clearValue',
|
||||
displayName: 'Clear value',
|
||||
},
|
||||
{
|
||||
handle: 'setTime',
|
||||
displayName: 'Set time',
|
||||
params: [
|
||||
{ handle: 'value', displayName: 'Value' },
|
||||
{ handle: 'format', displayName: 'Format' },
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'setValueInTimestamp',
|
||||
displayName: 'Set value in timestamp',
|
||||
params: [{ handle: 'value', displayName: 'Value' }],
|
||||
},
|
||||
{
|
||||
handle: 'setMinTime',
|
||||
displayName: 'Set min time',
|
||||
params: [{ handle: 'value', displayName: 'Value' }],
|
||||
},
|
||||
{
|
||||
handle: 'setMaxTime',
|
||||
displayName: 'Set max time',
|
||||
params: [{ handle: 'value', displayName: 'Value' }],
|
||||
},
|
||||
{
|
||||
handle: 'setDisplayTimezone',
|
||||
displayName: 'Set display timezone',
|
||||
params: [{ handle: 'value', displayName: 'Value' }],
|
||||
},
|
||||
{
|
||||
handle: 'setStoreTimezone',
|
||||
displayName: 'Set store timezone',
|
||||
params: [{ handle: 'value', displayName: 'Value' }],
|
||||
},
|
||||
{
|
||||
handle: 'setVisibility',
|
||||
displayName: 'Set visibility',
|
||||
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setLoading',
|
||||
displayName: 'Set loading',
|
||||
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setDisable',
|
||||
displayName: 'Set disable',
|
||||
params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setFocus',
|
||||
displayName: 'Set focus',
|
||||
},
|
||||
{
|
||||
handle: 'setBlur',
|
||||
displayName: 'Set blur',
|
||||
},
|
||||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
alignment: {
|
||||
type: 'switch',
|
||||
displayName: 'Alignment',
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'top' },
|
||||
options: [
|
||||
{ displayName: 'Side', value: 'side' },
|
||||
{ displayName: 'Top', value: 'top' },
|
||||
],
|
||||
accordian: 'label',
|
||||
},
|
||||
direction: {
|
||||
type: 'switch',
|
||||
displayName: 'Direction',
|
||||
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,
|
||||
},
|
||||
labelWidth: {
|
||||
type: 'slider',
|
||||
displayName: 'Width',
|
||||
accordian: 'label',
|
||||
conditionallyRender: {
|
||||
key: 'alignment',
|
||||
value: 'side',
|
||||
},
|
||||
isFxNotRequired: true,
|
||||
},
|
||||
auto: {
|
||||
type: 'checkbox',
|
||||
displayName: 'auto',
|
||||
showLabel: false,
|
||||
validation: { schema: { type: 'boolean' } },
|
||||
accordian: 'label',
|
||||
conditionallyRender: {
|
||||
key: 'alignment',
|
||||
value: 'side',
|
||||
},
|
||||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
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',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
},
|
||||
icon: {
|
||||
type: 'icon',
|
||||
displayName: 'Icon',
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
|
||||
accordian: 'field',
|
||||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#6A727C',
|
||||
},
|
||||
accordian: 'field',
|
||||
},
|
||||
iconDirection: {
|
||||
type: 'switch',
|
||||
displayName: '',
|
||||
validation: { schema: { type: 'string' } },
|
||||
showLabel: false,
|
||||
isIcon: true,
|
||||
options: [
|
||||
{ displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
|
||||
{ displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
|
||||
],
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderRadius: {
|
||||
type: 'input',
|
||||
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 #121212',
|
||||
},
|
||||
accordian: 'field',
|
||||
},
|
||||
padding: {
|
||||
type: 'switch',
|
||||
displayName: 'Padding',
|
||||
validation: {
|
||||
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
|
||||
defaultValue: 'default',
|
||||
},
|
||||
options: [
|
||||
{ displayName: 'Default', value: 'default' },
|
||||
{ displayName: 'None', value: 'none' },
|
||||
],
|
||||
accordian: 'container',
|
||||
},
|
||||
},
|
||||
|
||||
exposedVariables: {
|
||||
value: '',
|
||||
},
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
validation: {
|
||||
minTime: { value: '' },
|
||||
maxTime: { value: '' },
|
||||
customRule: { value: '' },
|
||||
mandatory: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
label: { value: 'Label' },
|
||||
defaultValue: { value: '00:00' },
|
||||
timeFormat: { value: 'HH:mm' },
|
||||
isTimezoneEnabled: { value: '{{false}}' },
|
||||
displayTimezone: { value: 'UTC' },
|
||||
storeTimezone: { value: 'UTC' },
|
||||
loadingState: { value: '{{false}}' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
tooltip: { value: '' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
labelColor: { value: '#1B1F24' },
|
||||
alignment: { value: 'side' },
|
||||
direction: { value: 'left' },
|
||||
labelWidth: { value: '20' },
|
||||
auto: { value: '{{true}}' },
|
||||
fieldBackgroundColor: { value: '#fff' },
|
||||
fieldBorderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
selectedTextColor: { value: '#1B1F24' },
|
||||
errTextColor: { value: '#E54D2E' },
|
||||
icon: { value: 'IconClock' },
|
||||
iconVisibility: { value: true },
|
||||
iconDirection: { value: 'left' },
|
||||
fieldBorderRadius: { value: '{{6}}' },
|
||||
boxShadow: { value: '0px 0px 0px 0px #121212' },
|
||||
padding: { value: 'default' },
|
||||
iconColor: { value: '#6A727C' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -61,7 +61,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -74,7 +74,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -83,7 +83,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -92,7 +92,7 @@ export const buttonConfig = {
|
|||
accordian: 'button',
|
||||
},
|
||||
loaderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Loader color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -110,7 +110,7 @@ export const buttonConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' } },
|
||||
accordian: 'button',
|
||||
|
|
@ -132,10 +132,7 @@ export const buttonConfig = {
|
|||
borderRadius: {
|
||||
type: 'numberInput',
|
||||
displayName: 'Border radius',
|
||||
validation: {
|
||||
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
|
||||
defaultValue: false,
|
||||
},
|
||||
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: false },
|
||||
accordian: 'button',
|
||||
},
|
||||
boxShadow: {
|
||||
|
|
@ -222,10 +219,10 @@ export const buttonConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#FFFFFF' },
|
||||
borderColor: { value: '#4368E3' },
|
||||
borderColor: { value: 'var(--primary-brand)' },
|
||||
loaderColor: { value: '#FFFFFF' },
|
||||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#4368E3' },
|
||||
backgroundColor: { value: 'var(--primary-brand)' },
|
||||
iconColor: { value: '#FFFFFF' },
|
||||
direction: { value: 'left' },
|
||||
padding: { value: 'default' },
|
||||
|
|
@ -68,7 +68,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -76,7 +76,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -108,7 +108,7 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected text colour',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -116,11 +116,11 @@ export const buttonGroupConfig = {
|
|||
},
|
||||
},
|
||||
selectedBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#007bff',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -147,7 +147,7 @@ export const buttonGroupConfig = {
|
|||
borderRadius: { value: '{{4}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
selectedTextColor: { value: '#FFFFFF' },
|
||||
selectedBackgroundColor: { value: '#4368E3' },
|
||||
selectedBackgroundColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -39,13 +39,13 @@ export const chartConfig = {
|
|||
},
|
||||
},
|
||||
markerColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Marker color',
|
||||
validation: {
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
defaultValue: '#CDE1F8',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
showAxes: {
|
||||
|
|
@ -134,7 +134,7 @@ export const chartConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
},
|
||||
|
|
@ -192,7 +192,7 @@ export const chartConfig = {
|
|||
},
|
||||
properties: {
|
||||
title: { value: 'This title can be changed' },
|
||||
markerColor: { value: '#CDE1F8' },
|
||||
markerColor: { value: 'var(--primary-brand)' },
|
||||
showAxes: { value: '{{true}}' },
|
||||
showGridLines: { value: '{{true}}' },
|
||||
plotFromJson: { value: '{{false}}' },
|
||||
|
|
@ -70,7 +70,7 @@ export const checkboxConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -78,7 +78,7 @@ export const checkboxConfig = {
|
|||
accordian: 'label',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -86,7 +86,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
checkboxColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Checked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -94,7 +94,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
uncheckedColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Unchecked color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -102,7 +102,7 @@ export const checkboxConfig = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -183,7 +183,7 @@ export const checkboxConfig = {
|
|||
styles: {
|
||||
disabledState: { value: '{{false}}' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
checkboxColor: { value: '#4368E3' },
|
||||
checkboxColor: { value: 'var(--primary-brand)' },
|
||||
uncheckedColor: { value: '#E4E7EB' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
handleColor: { value: '#FFFFFF' },
|
||||
|
|
@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#375FCF',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
color: { value: '' },
|
||||
color: { value: 'var(--primary-brand)' },
|
||||
textColor: { value: '' },
|
||||
textSize: { value: '{{16}}' },
|
||||
strokeWidth: { value: '{{8}}' },
|
||||
|
|
@ -4,7 +4,7 @@ export const colorPickerConfig = {
|
|||
description: 'Choose colors from a palette',
|
||||
component: 'ColorPicker',
|
||||
properties: {
|
||||
defaultColor: { type: 'color', displayName: 'Default color' },
|
||||
defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
|
||||
},
|
||||
defaultSize: {
|
||||
width: 9,
|
||||
|
|
@ -14,7 +14,9 @@ export const colorPickerConfig = {
|
|||
{
|
||||
displayName: 'Set Color',
|
||||
handle: 'setColor',
|
||||
params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
|
||||
params: [
|
||||
{ handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
|
||||
],
|
||||
},
|
||||
],
|
||||
others: {
|
||||
|
|
@ -71,7 +71,7 @@ export const containerConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -80,7 +80,7 @@ export const containerConfig = {
|
|||
accordian: 'container',
|
||||
},
|
||||
headerBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -89,7 +89,7 @@ export const containerConfig = {
|
|||
accordian: 'header',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -153,7 +153,7 @@ export const containerConfig = {
|
|||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
showHeader: {value: `{{true}}`},
|
||||
showHeader: { value: `{{true}}` },
|
||||
loadingState: { value: `{{false}}` },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
|
|
@ -169,8 +169,8 @@ export const datePickerV2Config = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -220,31 +220,31 @@ export const datePickerV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -257,7 +257,7 @@ export const datePickerV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
@ -199,8 +199,8 @@ export const daterangepickerConfig = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -250,31 +250,31 @@ export const daterangepickerConfig = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -287,7 +287,7 @@ export const daterangepickerConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
|
|||
],
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
displayName: 'Color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'colorSwatches',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
},
|
||||
|
|
@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
|
||||
accordian: 'field',
|
||||
|
|
@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
@ -15,7 +15,7 @@ export const dividerConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
dividerColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Divider color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -128,7 +128,7 @@ export const dropdownConfig = {
|
|||
defaultValue: true,
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Selected text color',
|
||||
validation: {
|
||||
schema: {
|
||||
|
|
@ -101,7 +101,7 @@ export const dropdownV2Config = {
|
|||
},
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -153,31 +153,31 @@ export const dropdownV2Config = {
|
|||
},
|
||||
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -190,7 +190,7 @@ export const dropdownV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
|
|
@ -249,7 +249,7 @@ export const formConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -267,7 +267,7 @@ export const formConfig = {
|
|||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -317,6 +317,7 @@ export const formConfig = {
|
|||
value:
|
||||
"{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
|
||||
},
|
||||
buttonToSubmit: { value: '{{"none"}}' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
|
|
@ -61,7 +61,7 @@ export const iconConfig = {
|
|||
},
|
||||
styles: {
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -144,7 +144,7 @@ export const imageConfig = {
|
|||
accordian: 'Image',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -153,7 +153,7 @@ export const imageConfig = {
|
|||
accordian: 'Container',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -58,7 +58,7 @@ import { datetimePickerV2Config } from './datetimepickerV2';
|
|||
import { datePickerV2Config } from './datepickerV2';
|
||||
import { timePickerConfig } from './timepicker';
|
||||
|
||||
const widgets = {
|
||||
export {
|
||||
buttonConfig,
|
||||
tableConfig,
|
||||
chartConfig,
|
||||
|
|
@ -119,48 +119,3 @@ const widgets = {
|
|||
iconConfig,
|
||||
boundedBoxConfig,
|
||||
};
|
||||
|
||||
const universalProps = {
|
||||
properties: {},
|
||||
general: {
|
||||
tooltip: { type: 'code', displayName: 'Tooltip', validation: { schema: { type: 'string' } } },
|
||||
},
|
||||
others: {},
|
||||
events: {},
|
||||
styles: {},
|
||||
validate: true,
|
||||
generalStyles: {
|
||||
boxShadow: { type: 'boxShadow', displayName: 'Box Shadow' },
|
||||
},
|
||||
definition: {
|
||||
others: {},
|
||||
events: [],
|
||||
styles: {},
|
||||
generalStyles: {
|
||||
boxShadow: { value: '0px 0px 0px 0px #00000040' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const combineProperties = (widget, universal, isArray = false) => {
|
||||
return {
|
||||
...universal,
|
||||
...widget,
|
||||
properties: { ...universal.properties, ...widget.properties },
|
||||
general: { ...universal.general, ...widget.general },
|
||||
others: { ...universal.others, ...widget.others },
|
||||
events: isArray ? [...universal.events, ...widget.events] : { ...universal.events, ...widget.events },
|
||||
styles: { ...universal.styles, ...widget.styles },
|
||||
generalStyles: { ...universal.generalStyles, ...widget.generalStyles },
|
||||
exposedVariables: { ...universal.exposedVariables, ...widget.exposedVariables },
|
||||
};
|
||||
};
|
||||
|
||||
export const componentTypes = Object.values(widgets).map((widget) => {
|
||||
return {
|
||||
...combineProperties(widget, universalProps),
|
||||
definition: combineProperties(widget.definition, universalProps.definition, true),
|
||||
};
|
||||
});
|
||||
|
||||
export default widgets;
|
||||
|
|
@ -77,7 +77,7 @@ export const kanbanConfig = {
|
|||
styles: {
|
||||
disabledState: { type: 'toggle', displayName: 'Disable' },
|
||||
visibility: { type: 'toggle', displayName: 'Visibility' },
|
||||
accentColor: { type: 'color', displayName: 'Accent color' },
|
||||
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
|
|
@ -157,7 +157,7 @@ export const kanbanConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
accentColor: { value: '#4d72fa' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
|
|||
visibility: { type: 'toggle', displayName: 'Visibility' },
|
||||
width: { type: 'number', displayName: 'Width' },
|
||||
minWidth: { type: 'number', displayName: 'Min Width' },
|
||||
accentColor: { type: 'color', displayName: 'Accent color' },
|
||||
accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
|
||||
},
|
||||
exposedVariables: {
|
||||
columns: {},
|
||||
|
|
@ -46,7 +46,7 @@ export const linkConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -120,7 +120,7 @@ export const listviewConfig = {
|
|||
},
|
||||
styles: {
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -128,7 +128,7 @@ export const listviewConfig = {
|
|||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -20,19 +20,6 @@ export const modalConfig = {
|
|||
defaultValue: 'This title can be changed',
|
||||
},
|
||||
},
|
||||
titleAlignment: {
|
||||
type: 'select',
|
||||
displayName: 'Title alignment',
|
||||
options: [
|
||||
{ name: 'left', value: 'left' },
|
||||
{ name: 'center', value: 'center' },
|
||||
{ name: 'right', value: 'right' },
|
||||
],
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: 'left',
|
||||
},
|
||||
},
|
||||
loadingState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Loading state',
|
||||
|
|
@ -94,7 +81,7 @@ export const modalConfig = {
|
|||
},
|
||||
styles: {
|
||||
headerBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Header background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -102,7 +89,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
headerTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Header title color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -110,7 +97,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
bodyBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Body background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -134,7 +121,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
triggerButtonBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Trigger button background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -142,7 +129,7 @@ export const modalConfig = {
|
|||
},
|
||||
},
|
||||
triggerButtonTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Trigger button text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -188,7 +175,7 @@ export const modalConfig = {
|
|||
bodyBackgroundColor: { value: '#ffffffff' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
visibility: { value: '{{true}}' },
|
||||
triggerButtonBackgroundColor: { value: '#4D72FA' },
|
||||
triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
|
||||
triggerButtonTextColor: { value: '#ffffffff' },
|
||||
},
|
||||
},
|
||||
|
|
@ -165,7 +165,7 @@ export const multiselectV2Config = {
|
|||
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -218,32 +218,32 @@ export const multiselectV2Config = {
|
|||
},
|
||||
|
||||
fieldBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
|
||||
fieldBorderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
accordian: 'field',
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -256,7 +256,7 @@ export const multiselectV2Config = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -365,7 +365,7 @@ export const multiselectV2Config = {
|
|||
icon: { value: 'IconHome2' },
|
||||
iconVisibility: { value: false },
|
||||
iconColor: { value: '#6A727C' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -20,10 +20,7 @@ export const numberinputConfig = {
|
|||
value: {
|
||||
type: 'code',
|
||||
displayName: 'Default value',
|
||||
validation: {
|
||||
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
|
||||
defaultValue: 0,
|
||||
},
|
||||
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 0 },
|
||||
},
|
||||
placeholder: {
|
||||
type: 'code',
|
||||
|
|
@ -75,7 +72,7 @@ export const numberinputConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -127,31 +124,31 @@ export const numberinputConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
|
||||
accordian: 'field',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -164,7 +161,7 @@ export const numberinputConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
|
||||
accordian: 'field',
|
||||
|
|
@ -282,7 +279,7 @@ export const numberinputConfig = {
|
|||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
errTextColor: { value: '#D72D39' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
color: { value: '#1B1F24' },
|
||||
|
|
@ -84,7 +84,7 @@ export const passinputConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -136,31 +136,31 @@ export const passinputConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#fff' },
|
||||
accordian: 'field',
|
||||
},
|
||||
accentColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Accent',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
|
||||
accordian: 'field',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
|
||||
accordian: 'field',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'field',
|
||||
},
|
||||
errTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Error text',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
|
||||
accordian: 'field',
|
||||
|
|
@ -173,7 +173,7 @@ export const passinputConfig = {
|
|||
visibility: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Icon color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
|
||||
accordian: 'field',
|
||||
|
|
@ -278,7 +278,7 @@ export const passinputConfig = {
|
|||
borderRadius: { value: '{{6}}' },
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderColor: { value: '#CCD1D5' },
|
||||
accentColor: { value: '#4368E3' },
|
||||
accentColor: { value: 'var(--primary-brand)' },
|
||||
errTextColor: { value: '#D72D39' },
|
||||
textColor: { value: '#1B1F24' },
|
||||
iconColor: { value: '#CFD3D859' },
|
||||
|
|
@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
|
|||
},
|
||||
styles: {
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
|
||||
accordian: 'label',
|
||||
|
|
@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
|
|||
isFxNotRequired: true,
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
switchOnBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Checked background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
|
|||
tooltipPlacement: 'bottom',
|
||||
},
|
||||
switchOffBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Unchecked background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
|
|||
tooltipPlacement: 'bottom',
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
|
|||
accordian: 'switch',
|
||||
},
|
||||
optionsTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export const radiobuttonConfig = {
|
||||
name: 'RadioButton',
|
||||
displayName: 'Radio Button',
|
||||
name: 'RadioButtonLegacy',
|
||||
displayName: 'Radio Button (Legacy)',
|
||||
description: 'Select one from multiple choices',
|
||||
component: 'RadioButton',
|
||||
defaultSize: {
|
||||
|
|
@ -53,7 +53,7 @@ export const radiobuttonConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -61,11 +61,11 @@ export const radiobuttonConfig = {
|
|||
},
|
||||
},
|
||||
activeColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Active color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#000000',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
|
|
@ -97,9 +97,7 @@ export const radiobuttonConfig = {
|
|||
],
|
||||
},
|
||||
],
|
||||
exposedVariables: {
|
||||
value: true,
|
||||
},
|
||||
exposedVariables: {},
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
|
|
@ -115,7 +113,7 @@ export const radiobuttonConfig = {
|
|||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '' },
|
||||
activeColor: { value: '' },
|
||||
activeColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
|
|
@ -53,7 +53,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
styles: {
|
||||
lineColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Line color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -61,7 +61,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
},
|
||||
handleColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Handle color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -69,7 +69,7 @@ export const rangeSliderConfig = {
|
|||
},
|
||||
},
|
||||
trackColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Track color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -109,7 +109,7 @@ export const rangeSliderConfig = {
|
|||
styles: {
|
||||
lineColor: { value: '' },
|
||||
handleColor: { value: '' },
|
||||
trackColor: { value: '' },
|
||||
trackColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
},
|
||||
},
|
||||
|
|
@ -23,11 +23,11 @@ export const spinnerConfig = {
|
|||
},
|
||||
},
|
||||
colour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Colour',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#0565ff',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
|
|
@ -54,7 +54,7 @@ export const spinnerConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
size: { value: 'sm' },
|
||||
colour: { value: '#0565ff' },
|
||||
colour: { value: 'var(--primary-brand)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -58,7 +58,7 @@ export const starratingConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Star color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -66,7 +66,7 @@ export const starratingConfig = {
|
|||
},
|
||||
},
|
||||
labelColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Label color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -55,22 +55,22 @@ export const statisticsConfig = {
|
|||
events: {},
|
||||
styles: {
|
||||
primaryLabelColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Primary label colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
|
||||
},
|
||||
primaryTextColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Primary text colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#000000' },
|
||||
},
|
||||
secondaryLabelColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Secondary label colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
|
||||
},
|
||||
secondaryTextColour: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Secondary text colour',
|
||||
validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
|
||||
},
|
||||
|
|
@ -45,15 +45,15 @@ export const stepsConfig = {
|
|||
},
|
||||
styles: {
|
||||
color: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#000000',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -101,7 +101,7 @@ export const stepsConfig = {
|
|||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
theme: { value: 'titles' },
|
||||
color: { value: '' },
|
||||
color: { value: 'var(--primary-brand)' },
|
||||
textColor: { value: '' },
|
||||
},
|
||||
},
|
||||
|
|
@ -157,7 +157,7 @@ export const tableConfig = {
|
|||
defaultValue: 'clientSide',
|
||||
},
|
||||
actionButtonBackgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -165,7 +165,7 @@ export const tableConfig = {
|
|||
},
|
||||
},
|
||||
actionButtonTextColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -293,7 +293,7 @@ export const tableConfig = {
|
|||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Text Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -373,7 +373,6 @@ export const tableConfig = {
|
|||
},
|
||||
maxRowHeightValue: {
|
||||
type: 'tableRowHeightInput',
|
||||
isFxNotRequired: true,
|
||||
showLabel: false,
|
||||
validation: {
|
||||
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
|
||||
|
|
@ -405,7 +404,7 @@ export const tableConfig = {
|
|||
accordian: 'Container',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -517,7 +516,7 @@ export const tableConfig = {
|
|||
loadingState: { value: '{{false}}' },
|
||||
data: {
|
||||
value:
|
||||
"{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', phone: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', phone: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', phone: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', phone: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', phone: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', phone: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', phone: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', phone: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', phone: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', phone: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
|
||||
"{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', mobile_number: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', mobile_number: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', mobile_number: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', mobile_number: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', mobile_number: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', mobile_number: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', mobile_number: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', mobile_number: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', mobile_number: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', mobile_number: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
|
||||
},
|
||||
useDynamicColumn: { value: '{{false}}' },
|
||||
columnData: {
|
||||
|
|
@ -591,8 +590,8 @@ export const tableConfig = {
|
|||
columnSize: 130,
|
||||
},
|
||||
{
|
||||
name: 'phone',
|
||||
key: 'phone',
|
||||
name: 'mobile_number',
|
||||
key: 'mobile_number',
|
||||
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -109,11 +109,11 @@ export const tabsConfig = {
|
|||
events: { onTabSwitch: { displayName: 'On tab switch' } },
|
||||
styles: {
|
||||
highlightColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Highlight color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#375FCF',
|
||||
defaultValue: 'var(--primary-brand)',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
|
|
@ -174,7 +174,7 @@ export const tabsConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
highlightColor: { value: '#375FCF' },
|
||||
highlightColor: { value: 'var(--primary-brand)' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
tabWidth: { value: 'auto' },
|
||||
|
|
@ -105,7 +105,7 @@ export const textConfig = {
|
|||
accordian: 'Text',
|
||||
},
|
||||
textColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Color',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -185,7 +185,7 @@ export const textConfig = {
|
|||
},
|
||||
|
||||
backgroundColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Background',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
|
|
@ -195,7 +195,7 @@ export const textConfig = {
|
|||
colorPickerPosition: 'top',
|
||||
},
|
||||
borderColor: {
|
||||
type: 'color',
|
||||
type: 'colorSwatches',
|
||||
displayName: 'Border',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue