@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
714 lines • 489 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import { v4 as uuidv4 } from 'uuid'; //AP-28MAR25 import uuid
import * as i0 from "@angular/core";
import * as i1 from "@angular/common/http";
import * as i2 from "../../../services/form-builder.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "../../../components/image-cropper/component/image-cropper.component";
import * as i6 from "../../../components/search-box/search-box.component";
export class PropertiesComponent {
http;
formBuilderService;
formButtonHandler = new EventEmitter();
selectedOption = '';
selectedElementIndex = -1;
selectedElementType = '';
selectedAlign = 'align-left'; // Add this property
selectedStyles = []; // Using array since multiple styles can be selected
errorMessage = '';
selectedElement = null; // Receive the selected element
headerSelect = false;
bookId;
book;
activeTab = 'attributes';
selectColumn;
transform = {
translateUnit: 'px',
scale: 1,
rotate: 0,
flipH: false,
flipV: false,
translateH: 0,
translateV: 0
};
canvasRotation = 0;
cropper;
loading = false;
cropperMaxHeight = 0;
cropperMaxWidth = 0;
cropperMinHeight = 0;
cropperMinWidth = 0;
cropperStaticWidth = 0;
cropperStaticHeight = 0;
aspectRatio = 4 / 3;
roundCropper = false;
imageChangedEvent = null;
alignImage = 'center';
// "endpoint": "https://dev-api.valarhr.com/nxt",
// SKS28MAR25 default book search endpoint
bookSubtext = {
"endpoint": "https://dev-api.valarhr.com/nxt",
"variable": null,
"field": ['label', 'name'],
"defaultField": "label"
};
isLinkDropdownOpen = false;
dropdown;
draggedId = null;
elementProperties = {
// AP-10MAR25 - Defines the Header element with a text input field
// AP-25MAR25 Add subtext all variables
'Header': {
elementProps: [
{ label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'title' }
]
},
'Text': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
// { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
'Book': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' }
],
fieldProps: [
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: []
},
// AP-19MAR25 Add Line Property
'Line': {
elementProps: [
{ label: 'Line Width', type: 'fieldSize', key: 'size' },
{ label: 'Padding Top', type: 'number', key: 'paddingTop', placeholder: 'Enter padding top' },
{ label: 'Padding Bottom', type: 'number', key: 'paddingBottom', placeholder: 'Enter padding bottom' },
{
label: 'Line Style', type: 'select', key: 'lineStyle',
options: ['Solid', 'Dashed', 'Dotted']
}
],
fieldProps: []
},
'Space': {
elementProps: [
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Field Size', type: 'fieldSize', key: 'size' },
],
fieldProps: []
},
'Boolean': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'checkbox', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
]
},
'Checkbox': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
label: 'Options',
type: 'checkbox',
key: 'options',
addOptionLabel: 'Add Option',
icon: 'plus'
},
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
'Calendar': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
// AP-12MAR25 - Added Date element Properties
'Date': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
// { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
// AP-21MAR25 - Add Time element Properties
'Time': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Default Time', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Select font',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '' },
{
label: 'Font Size', type: 'select', key: 'fontSize',
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
}
]
},
//AP-28MAR25 -Add DateTime Properties
'DateTime': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" }
]
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
'Email': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'size' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
{ label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": [
{ "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
{ "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
{ "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
{ "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
{ "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
{ "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
{ "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
{ "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
{ "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
{ "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
{ "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
{ "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
{ "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
]
}
],
appearance: [
// { label: 'Select Font', type: 'select', key: 'fontFamily', placeholder: 'Left', required: true },
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
{
label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
// { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
{ label: 'Blank Space', type: 'checkbox', key: 'blankSpace', defaultValue: false }
]
},
"Table": {
"elementProps": [
{ "label": "tableName", "placeholder": "Employee Details", "type": "text", "key": "questionText" },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
{ "label": "isNosIndicator", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isNosIndicator" },
{ "label": "isPagination", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isPagination" },
{ "label": "addInlineRecord", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.addInlineRecord" },
{ "label": "actionButton", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.actionButton" },
{ "label": "searchBar", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.searchBar" },
{ "label": "isDeleteRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isDeleteRow" },
{ "label": "isEditRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isEditRow" },
{ "label": "isButtons", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isButtons" },
{ "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
{
"label": "quickActionTools",
"type": "group",
"key": "quickActionTools",
"children": [
{ "label": "edit", "type": "toggle", "key": "edit" },
{ "label": "view", "type": "toggle", "key": "view" },
{ "label": "delete", "type": "toggle", "key": "delete" }
]
},
{ label: 'questionNumber', type: 'number', key: 'questionNumber' },
{ label: 'Field Size', type: 'fieldSize', key: 'size' },
{ "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
{
"label": "tableScrollEventChoice",
"type": "group",
"key": "tableScrollEventChoice",
"children": [
{ "label": "horizontal", "type": "toggle", "key": "horizontal" },
{ "label": "vertical", "type": "toggle", "key": "vertical" }
]
}
],
"fieldProps": [
{ "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "requiredField", "type": "toggle", "key": "requiredField" },
{ "label": "readOnly", "type": "toggle", "key": "readOnly" },
{ "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
{ "label": "disabled", "type": "toggle", "key": "disabled" },
{ "label": "hideElements", "type": "toggle", "key": "hideElements" },
{ "label": "masking", "type": "toggle", "key": "masking" },
{ "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
{ "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
{ label: '', placeholder: 'Enter Text', type: 'text', key: 'subText' },
{ label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{ "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
{ "label": "isDependence", "type": "toggle", "key": "isDependence" },
{ "label": "newLine", "type": "toggle", "key": "newLine" }
],
"appearance": [
{ "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
{ "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
{ "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
{ "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
{ "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
{ "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
{ "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
{ "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
]
},
"TableColumn": {
"elementProps": [
{ "label": "headerLabels", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "label" },
{ "label": "apiName", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "apiName" },
{
"label": "Summary Column", "placeholder": "Summary Column", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryColumn",
"subQuestion": [
{ "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
{ "label": "Operation", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
{ "label": "Operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
]
},
{
"label": "Summary Row", "placeholder": "Summary Row", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryRow", "subQuestion": [
{ "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
{ "label": "operation", "placeholder": "operation", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
{ "label": "column", "placeholder": "Employee Details", "type": "radio", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "column" },
{ "label": "operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
]
},
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
{ "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
{
"label": "quickActionTools",
"type": "group",
"key": "quickActionTools",
"children": [
{ "label": "edit", "type": "toggle", "key": "edit" },
{ "label": "view", "type": "toggle", "key": "view" },
{ "label": "delete", "type": "toggle", "key": "delete" }
]
},
{ "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
{
"label": "tableScrollEventChoice",
"type": "group",
"key": "tableScrollEventChoice",
"children": [
{ "label": "horizontal", "type": "toggle", "key": "horizontal" },
{ "label": "vertical", "type": "toggle", "key": "vertical" }
]
}
],
"fieldProps": [
{ "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "requiredField", "type": "toggle", "key": "requiredField" },
{ "label": "Read Only", "type": "checkbox", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "edit" },
{ "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
{ "label": "disabled", "type": "toggle", "key": "disabled" },
{ "label": "hideElements", "type": "toggle", "key": "hideElements" },
{ "label": "masking", "type": "toggle", "key": "masking" },
{ "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
{ "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
{ "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
{ "label": "isDependence", "type": "toggle", "key": "isDependence" },
{ "label": "newLine", "type": "toggle", "key": "newLine" }
],
"appearance": [
{ "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
{ "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
{ "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
{ "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
{ "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
{ "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
{ "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
{ "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
]
},
'File': {
elementProps: [
{ label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
{ label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
{ label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Size', type: 'fieldSize', key: 'siz