@bnsights/bbsf-controls 1.2.9 → 1.2.11

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -10283,9 +10283,362 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }] } });
 
+function buildTextBoxOptions(config, type, maxLength, minLength, languageValidation, isReadonly) {
+    const options = new TextBoxOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.type = type;
+    options.languageValidation = languageValidation;
+    if (maxLength)
+        options.maxLength = maxLength;
+    if (minLength)
+        options.minLength = minLength;
+    options.value = config.value;
+    options.isReadonly = isReadonly;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildNumberTextBoxOptions(config, maxValue, minValue, languageValidation, isReadonly) {
+    const options = new TextBoxOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.type = InputType.Number;
+    options.languageValidation = languageValidation;
+    const rangeNumber = new RangeNumber();
+    if (maxValue !== undefined)
+        rangeNumber.to = maxValue;
+    if (minValue !== undefined)
+        rangeNumber.from = minValue;
+    options.numberRange = rangeNumber;
+    options.value = config.value;
+    options.isReadonly = isReadonly;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildDatePickerOptions(config, pickerType, startDate, endDate) {
+    const options = new DatePickerOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.startDate = startDate;
+    options.endDate = endDate;
+    options.pickerType = pickerType;
+    options.selectMode = SelectMode.Single;
+    options.startView = StartView.Month;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildDropdownOptions(config, dataSource, singleSelection, hasSearch) {
+    const options = new DropdownOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.dataSource = dataSource;
+    options.singleSelection = singleSelection;
+    options.showCheckbox = false;
+    options.allowSearchFilter = hasSearch;
+    options.selectedItems = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildFileUploadOptions(config, fileMaxSizeInMB, isMultiple = false, maxNoOfFiles, maxSizeForAllFilesInMB) {
+    const options = new FileUploadOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    if (isMultiple) {
+        options.isMultipleFile = true;
+        if (maxSizeForAllFilesInMB)
+            options.maxSizeForAllFilesInMB = maxSizeForAllFilesInMB;
+        if (maxNoOfFiles)
+            options.maxNoOfFiles = maxNoOfFiles;
+    }
+    else {
+        if (fileMaxSizeInMB)
+            options.fileMaxSizeInMB = fileMaxSizeInMB;
+    }
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildImageUploadOptions(config, fileMaxSizeInMB) {
+    const options = new ImageUploadOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    if (fileMaxSizeInMB)
+        options.fileMaxSizeInMB = fileMaxSizeInMB;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildPhoneOptions(config) {
+    const options = new PhoneOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.allowSearch = true;
+    options.phoneValidation = true;
+    options.selectFirstCountry = true;
+    options.enablePlaceholder = true;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildTextAreaOptions(config, maxLength, minLength, rows, forceDirection) {
+    const options = new TextAreaOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    if (maxLength)
+        options.maxLength = maxLength;
+    if (minLength)
+        options.minLength = minLength;
+    options.rows = rows;
+    options.forceDirection = forceDirection;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildHtmlEditorOptions(config, maxLength, minLength, height, forceDirection) {
+    const options = new HtmlEditorOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    if (maxLength)
+        options.maxLength = maxLength;
+    if (minLength)
+        options.minLength = minLength;
+    options.height = height;
+    options.forceDirection = forceDirection;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildToggleSlideOptions(config) {
+    const options = new ToggleSlideOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildMapAutoCompleteOptions(config) {
+    const options = new MapAutoCompleteOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.isRequired = config.isRequired || false;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+function buildCheckBoxOptions(config, outputFunction) {
+    const options = new CheckBoxOptions();
+    options.name = config.name;
+    options.hideLabel = config.hideLabel;
+    options.labelKey = config.labelKey;
+    options.viewType = config.viewType;
+    options.labelDescription = config.labelDescription || '';
+    options.outputFunction = outputFunction;
+    options.value = config.value;
+    if (config.customValidation && config.customValidation.length > 0) {
+        options.customValidation = config.customValidation;
+    }
+    return options;
+}
+
+class FieldConfigFactoryService {
+    /**
+     * Creates field options based on the data type and control configuration
+     */
+    createFieldOptions(dataType, controlOptions, controlName, value) {
+        const baseConfig = {
+            name: controlName,
+            hideLabel: controlOptions.hideLabel,
+            labelKey: controlOptions.labelKey,
+            isRequired: controlOptions.isRequired,
+            viewType: controlOptions.viewType,
+            labelDescription: controlOptions.labelDescription || '',
+            customValidation: controlOptions.customValidation,
+            value: value
+        };
+        switch (dataType) {
+            // TextBox variants
+            case DataType.Text:
+                return buildTextBoxOptions(baseConfig, InputType.Text, controlOptions.maxLength, controlOptions.minLength, controlOptions.languageValidation, controlOptions.isReadonly);
+            case DataType.Name:
+                return buildTextBoxOptions(baseConfig, InputType.Text, controlOptions.maxLength, controlOptions.minLength, controlOptions.languageValidation, undefined);
+            case DataType.Email:
+                return buildTextBoxOptions(baseConfig, InputType.Email, undefined, undefined, controlOptions.languageValidation, undefined);
+            case DataType.Number:
+                return buildNumberTextBoxOptions(baseConfig, controlOptions.numberRange?.to, controlOptions.numberRange?.from, controlOptions.languageValidation, controlOptions.isReadonly);
+            case DataType.URL:
+                return buildTextBoxOptions(baseConfig, InputType.URL, undefined, undefined, undefined, undefined);
+            // DateTime variants
+            case DataType.Date:
+                return buildDatePickerOptions(baseConfig, PickerType.Calendar, controlOptions.startDate, controlOptions.endDate);
+            case DataType.DateTime:
+                return buildDatePickerOptions(baseConfig, PickerType.Both, controlOptions.startDate, controlOptions.endDate);
+            case DataType.Time:
+                return buildDatePickerOptions(baseConfig, PickerType.Timer, undefined, undefined);
+            // Dropdown variants
+            case DataType.SingleSelect:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], true, controlOptions.hasSearch || false);
+            case DataType.MulipleSelect:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], false, controlOptions.hasSearch || false);
+            case DataType.Goal:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], !controlOptions.isMultiple, controlOptions.hasSearch || false);
+            case DataType.Challenge:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], !controlOptions.isMultiple, controlOptions.hasSearch || false);
+            case DataType.InnovationLab:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], !controlOptions.isMultiple, controlOptions.hasSearch || false);
+            case DataType.Country:
+                return buildDropdownOptions(baseConfig, controlOptions.dataSource || [], !controlOptions.isMultiple, controlOptions.hasSearch || false);
+            // File upload variants
+            case DataType.File:
+                return buildFileUploadOptions(baseConfig, controlOptions.maxFileSizeInMB, false);
+            case DataType.MultiFile:
+                return buildFileUploadOptions(baseConfig, undefined, true, controlOptions.maxFileCount, controlOptions.maxFileSizeInMB);
+            // Image upload variants
+            case DataType.Image:
+                return buildImageUploadOptions(baseConfig, controlOptions.maxFileSizeInMB);
+            case DataType.CoverPhoto:
+                return buildImageUploadOptions(baseConfig, controlOptions.maxFileSizeInMB);
+            // Phone
+            case DataType.Mobile:
+                return buildPhoneOptions(baseConfig);
+            // MultilineText
+            case DataType.MultilineText:
+                return buildTextAreaOptions(baseConfig, controlOptions.maxLength, controlOptions.minLength, controlOptions.rows, controlOptions.forceDirection);
+            // HTML
+            case DataType.HTML:
+                return buildHtmlEditorOptions(baseConfig, controlOptions.maxLength, controlOptions.minLength, controlOptions.rows, controlOptions.forceDirection);
+            // Boolean
+            case DataType.Boolean:
+                return buildToggleSlideOptions(baseConfig);
+            // Location
+            case DataType.Location:
+                return buildMapAutoCompleteOptions(baseConfig);
+            // CheckBox
+            case DataType.CheckBox:
+                return buildCheckBoxOptions(baseConfig, controlOptions.outputFunction);
+            default:
+                throw new Error(`Unsupported DataType: ${dataType}`);
+        }
+    }
+    /**
+     * Returns the component type for a given data type
+     */
+    getComponentType(dataType) {
+        switch (dataType) {
+            case DataType.Text:
+            case DataType.Name:
+            case DataType.Email:
+            case DataType.Number:
+            case DataType.URL:
+                return TextboxComponent;
+            case DataType.Date:
+            case DataType.DateTime:
+            case DataType.Time:
+                return DateInputComponent;
+            case DataType.SingleSelect:
+            case DataType.MulipleSelect:
+            case DataType.Goal:
+            case DataType.Challenge:
+            case DataType.InnovationLab:
+            case DataType.Country:
+                return DropdownListComponent;
+            case DataType.File:
+            case DataType.MultiFile:
+                return FileUploadComponent;
+            case DataType.Image:
+            case DataType.CoverPhoto:
+                return ImageUploaderComponent;
+            case DataType.Mobile:
+                return PhoneComponent;
+            case DataType.MultilineText:
+                return TextAreaComponent;
+            case DataType.HTML:
+                return HtmlEditorComponent;
+            case DataType.Boolean:
+                return ToggleslideComponent;
+            case DataType.Location:
+                return MapAutoCompleteComponent;
+            case DataType.CheckBox:
+                return CheckBoxComponent;
+            default:
+                throw new Error(`Unsupported DataType: ${dataType}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldConfigFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldConfigFactoryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldConfigFactoryService, decorators: [{
+            type: Injectable
+        }] });
+
 class RepeaterFieldBuilderComponent {
-    constructor(renderComponentService, textControlHost) {
+    constructor(renderComponentService, fieldConfigFactory, textControlHost) {
         this.renderComponentService = renderComponentService;
+        this.fieldConfigFactory = fieldConfigFactory;
         this.textControlHost = textControlHost;
         this.itemsValue = [];
         this.itemValue = null;
@@ -10293,1177 +10646,64 @@ class RepeaterFieldBuilderComponent {
     ngOnInit() { }
     ngAfterViewInit() {
         setTimeout(() => {
-            if (this.itemsValue.length > 0)
-                this.itemValue = this.itemsValue[this.itemNumber];
-            if (this.itemValue) {
-                for (const key in this.itemValue) {
-                    if (Object.prototype.hasOwnProperty.call(this.itemValue, key) &&
-                        key == this.repeaterField.controlOptions.name) {
-                        const element = this.itemValue[key];
-                        this.value = element;
-                    }
-                }
-            }
-            this.item.clear();
-            switch (this.repeaterField?.controlType) {
-                //#region TextBox
-                case DataType.Text:
-                    let Text = new TextBoxOptions();
-                    Text.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    Text.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    Text.labelKey = this.repeaterField.controlOptions.labelKey;
-                    Text.isRequired = this.repeaterField.controlOptions.isRequired;
-                    Text.viewType = this.repeaterField.controlOptions.viewType;
-                    Text.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    Text.type = InputType.Text;
-                    Text.languageValidation = this.repeaterField.controlOptions.languageValidation;
-                    if (this.repeaterField.controlOptions.maxLength)
-                        Text.maxLength = this.repeaterField.controlOptions.maxLength;
-                    if (this.repeaterField.controlOptions.minLength)
-                        Text.minLength = this.repeaterField.controlOptions.minLength;
-                    Text.value = this.value;
-                    Text.isReadonly = this.repeaterField.controlOptions.isReadonly;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        Text.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, Text);
-                    break;
-                case DataType.Name:
-                    let name = new TextBoxOptions();
-                    name.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    name.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    name.labelKey = this.repeaterField.controlOptions.labelKey;
-                    name.isRequired = this.repeaterField.controlOptions.isRequired;
-                    name.viewType = this.repeaterField.controlOptions.viewType;
-                    name.languageValidation = this.repeaterField.controlOptions.languageValidation;
-                    name.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.maxLength)
-                        name.maxLength = this.repeaterField.controlOptions.maxLength;
-                    if (this.repeaterField.controlOptions.minLength)
-                        name.minLength = this.repeaterField.controlOptions.minLength;
-                    name.type = InputType.Text;
-                    name.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        name.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, name);
-                    break;
-                case DataType.Email:
-                    let email = new TextBoxOptions();
-                    email.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    email.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    email.labelKey = this.repeaterField.controlOptions.labelKey;
-                    email.isRequired = this.repeaterField.controlOptions.isRequired;
-                    email.viewType = this.repeaterField.controlOptions.viewType;
-                    email.languageValidation = this.repeaterField.controlOptions.languageValidation;
-                    email.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    email.type = InputType.Email;
-                    email.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        email.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, email);
-                    break;
-                case DataType.Number:
-                    let number = new TextBoxOptions();
-                    number.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    number.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    number.labelKey = this.repeaterField.controlOptions.labelKey;
-                    number.isRequired = this.repeaterField.controlOptions.isRequired;
-                    number.viewType = this.repeaterField.controlOptions.viewType;
-                    number.languageValidation = this.repeaterField.controlOptions.languageValidation;
-                    number.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    number.type = InputType.Number;
-                    let rangeNumber = new RangeNumber();
-                    if (this.repeaterField.controlOptions.numberRange) {
-                        rangeNumber.to = this.repeaterField.controlOptions.numberRange.to;
-                        rangeNumber.from = this.repeaterField.controlOptions.numberRange.from;
-                    }
-                    number.numberRange = rangeNumber;
-                    number.value = this.value;
-                    number.isReadonly = this.repeaterField.controlOptions.isReadonly;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        number.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, number);
-                    break;
-                case DataType.URL:
-                    let url = new TextBoxOptions();
-                    url.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    url.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    url.labelKey = this.repeaterField.controlOptions.labelKey;
-                    url.isRequired = this.repeaterField.controlOptions.isRequired;
-                    url.viewType = this.repeaterField.controlOptions.viewType;
-                    url.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    url.type = InputType.URL;
-                    url.value = this.value;
-                    this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, url);
-                    break;
-                //#endregion
-                //#region  DateTime
-                case DataType.Date:
-                    let date = new DatePickerOptions();
-                    date.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    date.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    date.labelKey = this.repeaterField.controlOptions.labelKey;
-                    date.isRequired = this.repeaterField.controlOptions.isRequired;
-                    date.viewType = this.repeaterField.controlOptions.viewType;
-                    date.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    date.startDate = this.repeaterField.controlOptions.startDate;
-                    date.endDate = this.repeaterField.controlOptions.endDate;
-                    date.pickerType = PickerType.Calendar;
-                    date.selectMode = SelectMode.Single;
-                    date.startView = StartView.Month;
-                    date.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        date.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, date);
-                    break;
-                case DataType.DateTime:
-                    let dateTime = new DatePickerOptions();
-                    dateTime.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    dateTime.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    dateTime.labelKey = this.repeaterField.controlOptions.labelKey;
-                    dateTime.isRequired = this.repeaterField.controlOptions.isRequired;
-                    dateTime.viewType = this.repeaterField.controlOptions.viewType;
-                    dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    dateTime.startDate = this.repeaterField.controlOptions.startDate;
-                    dateTime.endDate = this.repeaterField.controlOptions.endDate;
-                    dateTime.pickerType = PickerType.Both;
-                    dateTime.selectMode = SelectMode.Single;
-                    dateTime.startView = StartView.Month;
-                    dateTime.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        dateTime.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, dateTime);
-                    break;
-                case DataType.Time:
-                    let time = new DatePickerOptions();
-                    time.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    time.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    time.labelKey = this.repeaterField.controlOptions.labelKey;
-                    time.isRequired = this.repeaterField.controlOptions.isRequired;
-                    time.viewType = this.repeaterField.controlOptions.viewType;
-                    time.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    time.pickerType = PickerType.Timer;
-                    time.selectMode = SelectMode.Single;
-                    time.startView = StartView.Month;
-                    time.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        time.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, time);
-                    break;
-                //#endregion
-                //#region Dropdown
-                case DataType.SingleSelect:
-                    let singleSelect = new DropdownOptions();
-                    singleSelect.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    singleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    singleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
-                    singleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
-                    singleSelect.viewType = this.repeaterField.controlOptions.viewType;
-                    singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    singleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
-                    singleSelect.singleSelection = true;
-                    singleSelect.showCheckbox = false;
-                    singleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    singleSelect.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        singleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, singleSelect);
-                    break;
-                case DataType.MulipleSelect:
-                    let multipleSelect = new DropdownOptions();
-                    multipleSelect.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    multipleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    multipleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
-                    multipleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
-                    multipleSelect.viewType = this.repeaterField.controlOptions.viewType;
-                    multipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    multipleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
-                    multipleSelect.singleSelection = false;
-                    multipleSelect.showCheckbox = false;
-                    multipleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    multipleSelect.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        multipleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, multipleSelect);
-                    break;
-                case DataType.Goal:
-                    let goal = new DropdownOptions();
-                    goal.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    goal.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    goal.labelKey = this.repeaterField.controlOptions.labelKey;
-                    goal.isRequired = this.repeaterField.controlOptions.isRequired;
-                    goal.viewType = this.repeaterField.controlOptions.viewType;
-                    goal.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    goal.dataSource = this.repeaterField.controlOptions.dataSource;
-                    goal.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                    goal.showCheckbox = false;
-                    goal.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    goal.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        goal.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, goal);
-                    break;
-                case DataType.Challenge:
-                    let challenge = new DropdownOptions();
-                    challenge.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
-                    challenge.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    challenge.labelKey = this.repeaterField.controlOptions.labelKey;
-                    challenge.isRequired = this.repeaterField.controlOptions.isRequired;
-                    challenge.viewType = this.repeaterField.controlOptions.viewType;
-                    challenge.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                    challenge.dataSource = this.repeaterField.controlOptions.dataSource;
-                    challenge.dataSource = this.repeaterField.controlOptions.dataSource;
-                    challenge.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                    challenge.showCheckbox = false;
-                    challenge.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    challenge.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        challenge.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, challenge);
-                    break;
-                case DataType.InnovationLab:
-                    let innovationLab = new DropdownOptions();
-                    innovationLab.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    innovationLab.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    innovationLab.labelKey = this.repeaterField.controlOptions.labelKey;
-                    innovationLab.isRequired = this.repeaterField.controlOptions.isRequired;
-                    innovationLab.viewType = this.repeaterField.controlOptions.viewType;
-                    innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    innovationLab.dataSource = this.repeaterField.controlOptions.dataSource;
-                    innovationLab.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                    innovationLab.showCheckbox = false;
-                    innovationLab.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    innovationLab.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        innovationLab.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, innovationLab);
-                    break;
-                case DataType.Country:
-                    let country = new DropdownOptions();
-                    country.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    country.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    country.labelKey = this.repeaterField.controlOptions.labelKey;
-                    country.isRequired = this.repeaterField.controlOptions.isRequired;
-                    country.viewType = this.repeaterField.controlOptions.viewType;
-                    country.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    country.dataSource = this.repeaterField.controlOptions.dataSource;
-                    country.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                    country.showCheckbox = false;
-                    country.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                    country.selectedItems = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        country.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, country);
-                    break;
-                //#endregion
-                //#region FileUpload
-                case DataType.File:
-                    let file = new FileUploadOptions();
-                    file.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    file.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    file.labelKey = this.repeaterField.controlOptions.labelKey;
-                    file.isRequired = this.repeaterField.controlOptions.isRequired;
-                    file.viewType = this.repeaterField.controlOptions.viewType;
-                    file.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    file.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                    file.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        file.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, file);
-                    break;
-                case DataType.MultiFile:
-                    let multiFile = new FileUploadOptions();
-                    file.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    file.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    file.labelKey = this.repeaterField.controlOptions.labelKey;
-                    file.isRequired = this.repeaterField.controlOptions.isRequired;
-                    file.viewType = this.repeaterField.controlOptions.viewType;
-                    file.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    multiFile.maxSizeForAllFilesInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                    multiFile.maxNoOfFiles = this.repeaterField.controlOptions.maxFileCount;
-                    multiFile.isMultipleFile = true;
-                    multiFile.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        multiFile.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, multiFile);
-                    break;
-                //#endregion
-                //#region ImageUpload
-                case DataType.Image:
-                    let image = new ImageUploadOptions();
-                    image.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    image.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    image.labelKey = this.repeaterField.controlOptions.labelKey;
-                    image.isRequired = this.repeaterField.controlOptions.isRequired;
-                    image.viewType = this.repeaterField.controlOptions.viewType;
-                    image.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.maxFileSizeInMB)
-                        image.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                    image.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        image.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, image);
-                    break;
-                case DataType.CoverPhoto:
-                    let coverPhoto = new ImageUploadOptions();
-                    coverPhoto.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    coverPhoto.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    coverPhoto.labelKey = this.repeaterField.controlOptions.labelKey;
-                    coverPhoto.isRequired = this.repeaterField.controlOptions.isRequired;
-                    coverPhoto.viewType = this.repeaterField.controlOptions.viewType;
-                    coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.maxFileSizeInMB)
-                        coverPhoto.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                    coverPhoto.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        coverPhoto.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, coverPhoto);
-                    break;
-                //#endregion
-                //#region Mobile
-                case DataType.Mobile:
-                    let mobile = new PhoneOptions();
-                    mobile.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    mobile.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    mobile.labelKey = this.repeaterField.controlOptions.labelKey;
-                    mobile.isRequired = this.repeaterField.controlOptions.isRequired;
-                    mobile.viewType = this.repeaterField.controlOptions.viewType;
-                    mobile.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    mobile.allowSearch = true;
-                    mobile.phoneValidation = true;
-                    mobile.selectFirstCountry = true;
-                    mobile.enablePlaceholder = true;
-                    mobile.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        mobile.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, PhoneComponent, this.group, mobile);
-                    break;
-                //#endregion
-                //#region MultilineText
-                case DataType.MultilineText:
-                    let multilineText = new TextAreaOptions();
-                    multilineText.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    multilineText.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    multilineText.labelKey = this.repeaterField.controlOptions.labelKey;
-                    multilineText.isRequired = this.repeaterField.controlOptions.isRequired;
-                    multilineText.viewType = this.repeaterField.controlOptions.viewType;
-                    multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.maxLength)
-                        multilineText.maxLength = this.repeaterField.controlOptions.maxLength;
-                    if (this.repeaterField.controlOptions.minLength)
-                        multilineText.minLength = this.repeaterField.controlOptions.minLength;
-                    multilineText.rows = this.repeaterField.controlOptions.rows;
-                    multilineText.forceDirection = this.repeaterField.controlOptions.forceDirection;
-                    multilineText.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        multilineText.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, TextAreaComponent, this.group, multilineText);
-                    break;
-                //#endregion
-                //#region HTML
-                case DataType.HTML:
-                    let html = new HtmlEditorOptions();
-                    html.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    html.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    html.labelKey = this.repeaterField.controlOptions.labelKey;
-                    html.isRequired = this.repeaterField.controlOptions.isRequired;
-                    html.viewType = this.repeaterField.controlOptions.viewType;
-                    html.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.maxLength)
-                        html.maxLength = this.repeaterField.controlOptions.maxLength;
-                    if (this.repeaterField.controlOptions.minLength)
-                        html.minLength = this.repeaterField.controlOptions.minLength;
-                    html.height = this.repeaterField.controlOptions.rows;
-                    html.forceDirection = this.repeaterField.controlOptions.forceDirection;
-                    html.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        html.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, html);
-                    break;
-                //#endregion
-                //#region Boolean
-                case DataType.Boolean:
-                    let boolean = new ToggleSlideOptions();
-                    boolean.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    boolean.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    boolean.labelKey = this.repeaterField.controlOptions.labelKey;
-                    boolean.viewType = this.repeaterField.controlOptions.viewType;
-                    boolean.value = this.value;
-                    boolean.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        boolean.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, ToggleslideComponent, this.group, boolean);
-                    break;
-                //#endregion
-                //#region Location
-                case DataType.Location:
-                    let location = new MapAutoCompleteOptions();
-                    location.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    location.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    location.labelKey = this.repeaterField.controlOptions.labelKey;
-                    location.isRequired = this.repeaterField.controlOptions.isRequired;
-                    location.viewType = this.repeaterField.controlOptions.viewType;
-                    location.value = this.value;
-                    location.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        location.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, MapAutoCompleteComponent, this.group, location);
-                    break;
-                //#endregion
-                //#region CheckBox
-                case DataType.CheckBox:
-                    let checkBox = new CheckBoxOptions();
-                    checkBox.name =
-                        this.repeaterField.controlOptions.name +
-                            '.' +
-                            this.itemNumber.toString() +
-                            '.' +
-                            this.controlNumber.toString();
-                    checkBox.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                    checkBox.labelKey = this.repeaterField.controlOptions.labelKey;
-                    checkBox.viewType = this.repeaterField.controlOptions.viewType;
-                    checkBox.outputFunction = this.repeaterField.controlOptions.outputFunction;
-                    checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription
-                        ? this.repeaterField.controlOptions.labelDescription
-                        : '';
-                    checkBox.value = this.value;
-                    if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                        checkBox.customValidation = this.repeaterField.controlOptions.customValidation;
-                    }
-                    this.renderComponentService.renderDynamicComponent(this.item, CheckBoxComponent, this.group, checkBox);
-                    break;
-                //#endregion
-                default:
-                    break;
-            }
+            const value = this.extractValueFromItemsValue();
+            const controlName = this.buildControlName(this.itemNumber);
+            this.renderField(controlName, value);
         }, 0);
     }
     ngOnChanges(changes) {
-        if (changes.itemNumber)
-            if (changes.itemNumber.previousValue) {
-                let name = this.repeaterField.controlOptions.name +
-                    '.' +
-                    changes.itemNumber.previousValue.toString() +
-                    '.' +
-                    this.controlNumber.toString();
-                let value = this.group.controls[name].value;
-                this.item.clear();
-                this.group.removeControl(name);
-                switch (this.repeaterField.controlType) {
-                    //#region TextBox
-                    case DataType.Text:
-                        let text = new TextBoxOptions();
-                        text.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        text.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        text.labelKey = this.repeaterField.controlOptions.labelKey;
-                        text.isRequired = this.repeaterField.controlOptions.isRequired;
-                        text.viewType = this.repeaterField.controlOptions.viewType;
-                        text.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        text.type = InputType.Text;
-                        if (this.repeaterField.controlOptions.maxLength)
-                            text.maxLength = this.repeaterField.controlOptions.maxLength;
-                        if (this.repeaterField.controlOptions.minLength)
-                            text.minLength = this.repeaterField.controlOptions.minLength;
-                        text.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            text.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, text);
-                        break;
-                    case DataType.Name:
-                        let name = new TextBoxOptions();
-                        name.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        name.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        name.labelKey = this.repeaterField.controlOptions.labelKey;
-                        name.isRequired = this.repeaterField.controlOptions.isRequired;
-                        name.viewType = this.repeaterField.controlOptions.viewType;
-                        name.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        if (this.repeaterField.controlOptions.maxLength)
-                            name.maxLength = this.repeaterField.controlOptions.maxLength;
-                        if (this.repeaterField.controlOptions.minLength)
-                            name.minLength = this.repeaterField.controlOptions.minLength;
-                        name.type = InputType.Text;
-                        name.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            name.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, name);
-                        break;
-                    case DataType.Email:
-                        let email = new TextBoxOptions();
-                        email.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        email.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        email.labelKey = this.repeaterField.controlOptions.labelKey;
-                        email.isRequired = this.repeaterField.controlOptions.isRequired;
-                        email.viewType = this.repeaterField.controlOptions.viewType;
-                        email.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        email.type = InputType.Email;
-                        email.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            email.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, email);
-                        break;
-                    case DataType.Number:
-                        let number = new TextBoxOptions();
-                        number.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        number.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        number.labelKey = this.repeaterField.controlOptions.labelKey;
-                        number.isRequired = this.repeaterField.controlOptions.isRequired;
-                        number.viewType = this.repeaterField.controlOptions.viewType;
-                        number.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        number.type = InputType.Number;
-                        let rangeNumber = new RangeNumber();
-                        rangeNumber.to = this.repeaterField.controlOptions.maxLength;
-                        rangeNumber.from = this.repeaterField.controlOptions.minLength;
-                        number.numberRange = rangeNumber;
-                        number.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            number.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, number);
-                        break;
-                    case DataType.URL:
-                        let url = new TextBoxOptions();
-                        url.name = `${this.repeaterField.controlOptions.name}.${changes.itemNumber.currentValue}.${this.controlNumber}`;
-                        url.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        url.labelKey = this.repeaterField.controlOptions.labelKey;
-                        url.isRequired = this.repeaterField.controlOptions.isRequired;
-                        url.viewType = this.repeaterField.controlOptions.viewType;
-                        url.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                        url.type = InputType.URL;
-                        url.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            url.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, url);
-                        break;
-                    //#endregion
-                    //#region DateTime
-                    case DataType.Date:
-                        let date = new DatePickerOptions();
-                        date.name = `${this.repeaterField.controlOptions.name}.${changes.itemNumber.currentValue}.${this.controlNumber}`;
-                        date.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        date.labelKey = this.repeaterField.controlOptions.labelKey;
-                        date.isRequired = this.repeaterField.controlOptions.isRequired;
-                        date.viewType = this.repeaterField.controlOptions.viewType;
-                        date.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                        date.startDate = this.repeaterField.controlOptions.startDate;
-                        date.endDate = this.repeaterField.controlOptions.endDate;
-                        date.pickerType = PickerType.Calendar;
-                        date.selectMode = SelectMode.Single;
-                        date.startView = StartView.Month;
-                        date.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            date.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, date);
-                        break;
-                    case DataType.DateTime:
-                        let dateTime = new DatePickerOptions();
-                        dateTime.name = `${this.repeaterField.controlOptions.name}.${changes.itemNumber.currentValue}.${this.controlNumber}`;
-                        dateTime.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        dateTime.labelKey = this.repeaterField.controlOptions.labelKey;
-                        dateTime.isRequired = this.repeaterField.controlOptions.isRequired;
-                        dateTime.viewType = this.repeaterField.controlOptions.viewType;
-                        dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                        dateTime.startDate = this.repeaterField.controlOptions.startDate;
-                        dateTime.endDate = this.repeaterField.controlOptions.endDate;
-                        dateTime.pickerType = PickerType.Both;
-                        dateTime.selectMode = SelectMode.Single;
-                        dateTime.startView = StartView.Month;
-                        dateTime.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            dateTime.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, dateTime);
-                        break;
-                    case DataType.Time:
-                        let time = new DatePickerOptions();
-                        time.name = `${this.repeaterField.controlOptions.name}.${changes.itemNumber.currentValue}.${this.controlNumber}`;
-                        time.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        time.labelKey = this.repeaterField.controlOptions.labelKey;
-                        time.isRequired = this.repeaterField.controlOptions.isRequired;
-                        time.viewType = this.repeaterField.controlOptions.viewType;
-                        time.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
-                        time.pickerType = PickerType.Timer;
-                        time.selectMode = SelectMode.Single;
-                        time.startView = StartView.Month;
-                        time.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            time.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, time);
-                        break;
-                    //#endregion
-                    //#region Dropdown
-                    case DataType.SingleSelect:
-                        let singleSelect = new DropdownOptions();
-                        singleSelect.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        singleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        singleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
-                        singleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
-                        singleSelect.viewType = this.repeaterField.controlOptions.viewType;
-                        singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        singleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
-                        singleSelect.singleSelection = true;
-                        singleSelect.showCheckbox = false;
-                        singleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        singleSelect.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            singleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, singleSelect);
-                        break;
-                    case DataType.MulipleSelect:
-                        let mulipleSelect = new DropdownOptions();
-                        mulipleSelect.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        mulipleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        mulipleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
-                        mulipleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
-                        mulipleSelect.viewType = this.repeaterField.controlOptions.viewType;
-                        mulipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        mulipleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
-                        mulipleSelect.singleSelection = false;
-                        mulipleSelect.showCheckbox = false;
-                        mulipleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        mulipleSelect.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            mulipleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, mulipleSelect);
-                        break;
-                    case DataType.Goal:
-                        let goal = new DropdownOptions();
-                        goal.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        goal.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        goal.labelKey = this.repeaterField.controlOptions.labelKey;
-                        goal.isRequired = this.repeaterField.controlOptions.isRequired;
-                        goal.viewType = this.repeaterField.controlOptions.viewType;
-                        goal.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        goal.dataSource = this.repeaterField.controlOptions.dataSource;
-                        goal.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                        goal.showCheckbox = false;
-                        goal.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        goal.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            goal.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, goal);
-                        break;
-                    case DataType.Challenge:
-                        let challenge = new DropdownOptions();
-                        challenge.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        challenge.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        challenge.labelKey = this.repeaterField.controlOptions.labelKey;
-                        challenge.isRequired = this.repeaterField.controlOptions.isRequired;
-                        challenge.viewType = this.repeaterField.controlOptions.viewType;
-                        challenge.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        challenge.dataSource = this.repeaterField.controlOptions.dataSource;
-                        challenge.dataSource = this.repeaterField.controlOptions.dataSource;
-                        challenge.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                        challenge.showCheckbox = false;
-                        challenge.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        challenge.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            challenge.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, challenge);
-                        break;
-                    case DataType.InnovationLab:
-                        let innovationLab = new DropdownOptions();
-                        innovationLab.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        innovationLab.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        innovationLab.labelKey = this.repeaterField.controlOptions.labelKey;
-                        innovationLab.isRequired = this.repeaterField.controlOptions.isRequired;
-                        innovationLab.viewType = this.repeaterField.controlOptions.viewType;
-                        innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        innovationLab.dataSource = this.repeaterField.controlOptions.dataSource;
-                        innovationLab.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                        innovationLab.showCheckbox = false;
-                        innovationLab.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        innovationLab.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            innovationLab.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, innovationLab);
-                        break;
-                    case DataType.Country:
-                        let country = new DropdownOptions();
-                        country.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        country.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        country.labelKey = this.repeaterField.controlOptions.labelKey;
-                        country.isRequired = this.repeaterField.controlOptions.isRequired;
-                        country.viewType = this.repeaterField.controlOptions.viewType;
-                        country.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        country.dataSource = this.repeaterField.controlOptions.dataSource;
-                        country.singleSelection = !this.repeaterField.controlOptions.isMultiple;
-                        country.showCheckbox = false;
-                        country.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
-                        country.selectedItems = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            country.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, country);
-                        break;
-                    //#endregion
-                    //#region FileUpload
-                    case DataType.File:
-                        let file = new FileUploadOptions();
-                        file.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        file.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        file.labelKey = this.repeaterField.controlOptions.labelKey;
-                        file.isRequired = this.repeaterField.controlOptions.isRequired;
-                        file.viewType = this.repeaterField.controlOptions.viewType;
-                        file.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        file.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                        file.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            file.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, file);
-                        break;
-                    case DataType.MultiFile:
-                        let multiFile = new FileUploadOptions();
-                        file.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        file.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        file.labelKey = this.repeaterField.controlOptions.labelKey;
-                        file.isRequired = this.repeaterField.controlOptions.isRequired;
-                        file.viewType = this.repeaterField.controlOptions.viewType;
-                        file.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        multiFile.maxSizeForAllFilesInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                        multiFile.maxNoOfFiles = this.repeaterField.controlOptions.maxFileCount;
-                        multiFile.isMultipleFile = true;
-                        multiFile.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            multiFile.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, multiFile);
-                        break;
-                    //#endregion
-                    //#region ImageUpload
-                    case DataType.Image:
-                        let image = new ImageUploadOptions();
-                        image.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        image.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        image.labelKey = this.repeaterField.controlOptions.labelKey;
-                        image.isRequired = this.repeaterField.controlOptions.isRequired;
-                        image.viewType = this.repeaterField.controlOptions.viewType;
-                        image.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        if (this.repeaterField.controlOptions.maxFileSizeInMB)
-                            image.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                        image.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            image.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, image);
-                        break;
-                    case DataType.CoverPhoto:
-                        let coverPhoto = new ImageUploadOptions();
-                        coverPhoto.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        coverPhoto.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        coverPhoto.labelKey = this.repeaterField.controlOptions.labelKey;
-                        coverPhoto.isRequired = this.repeaterField.controlOptions.isRequired;
-                        coverPhoto.viewType = this.repeaterField.controlOptions.viewType;
-                        coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        if (this.repeaterField.controlOptions.maxFileSizeInMB)
-                            coverPhoto.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
-                        coverPhoto.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            coverPhoto.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, coverPhoto);
-                        break;
-                    //#endregion
-                    //#region Mobile
-                    case DataType.Mobile:
-                        let mobile = new PhoneOptions();
-                        mobile.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        mobile.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        mobile.labelKey = this.repeaterField.controlOptions.labelKey;
-                        mobile.isRequired = this.repeaterField.controlOptions.isRequired;
-                        mobile.viewType = this.repeaterField.controlOptions.viewType;
-                        mobile.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        mobile.allowSearch = true;
-                        mobile.phoneValidation = true;
-                        mobile.selectFirstCountry = true;
-                        mobile.enablePlaceholder = true;
-                        mobile.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            mobile.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, PhoneComponent, this.group, mobile);
-                        break;
-                    //#endregion
-                    //#region MultilineText
-                    case DataType.MultilineText:
-                        let multilineText = new TextAreaOptions();
-                        multilineText.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        multilineText.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        multilineText.labelKey = this.repeaterField.controlOptions.labelKey;
-                        multilineText.isRequired = this.repeaterField.controlOptions.isRequired;
-                        multilineText.viewType = this.repeaterField.controlOptions.viewType;
-                        multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        if (this.repeaterField.controlOptions.maxLength)
-                            multilineText.maxLength = this.repeaterField.controlOptions.maxLength;
-                        if (this.repeaterField.controlOptions.minLength)
-                            multilineText.minLength = this.repeaterField.controlOptions.minLength;
-                        multilineText.rows = this.repeaterField.controlOptions.rows;
-                        multilineText.forceDirection = this.repeaterField.controlOptions.forceDirection;
-                        multilineText.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            multilineText.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, TextAreaComponent, this.group, multilineText);
-                        break;
-                    //#endregion
-                    //#region HTML
-                    case DataType.HTML:
-                        let html = new HtmlEditorOptions();
-                        html.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        html.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        html.labelKey = this.repeaterField.controlOptions.labelKey;
-                        html.isRequired = this.repeaterField.controlOptions.isRequired;
-                        html.viewType = this.repeaterField.controlOptions.viewType;
-                        html.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        if (this.repeaterField.controlOptions.maxLength)
-                            html.maxLength = this.repeaterField.controlOptions.maxLength;
-                        if (this.repeaterField.controlOptions.minLength)
-                            html.minLength = this.repeaterField.controlOptions.minLength;
-                        html.height = this.repeaterField.controlOptions.rows;
-                        html.forceDirection = this.repeaterField.controlOptions.forceDirection;
-                        html.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            html.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, html);
-                        break;
-                    //#endregion
-                    //#region Boolean
-                    case DataType.Boolean:
-                        let boolean = new ToggleSlideOptions();
-                        boolean.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        boolean.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        boolean.labelKey = this.repeaterField.controlOptions.labelKey;
-                        boolean.viewType = this.repeaterField.controlOptions.viewType;
-                        boolean.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        boolean.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            boolean.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, ToggleslideComponent, this.group, boolean);
-                        break;
-                    //#endregion
-                    //#region Location
-                    case DataType.Location:
-                        let location = new MapAutoCompleteOptions();
-                        location.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        location.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        location.labelKey = this.repeaterField.controlOptions.labelKey;
-                        location.isRequired = this.repeaterField.controlOptions.isRequired;
-                        location.viewType = this.repeaterField.controlOptions.viewType;
-                        location.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        location.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            location.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, MapAutoCompleteComponent, this.group, location);
-                        break;
-                    //#endregion
-                    //#region CheckBox
-                    case DataType.CheckBox:
-                        let checkBox = new CheckBoxOptions();
-                        checkBox.name =
-                            this.repeaterField.controlOptions.name +
-                                '.' +
-                                changes.itemNumber.currentValue +
-                                '.' +
-                                this.controlNumber.toString();
-                        checkBox.hideLabel = this.repeaterField.controlOptions.hideLabel;
-                        checkBox.labelKey = this.repeaterField.controlOptions.labelKey;
-                        checkBox.viewType = this.repeaterField.controlOptions.viewType;
-                        checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription
-                            ? this.repeaterField.controlOptions.labelDescription
-                            : '';
-                        checkBox.outputFunction = this.repeaterField.controlOptions.outputFunction;
-                        checkBox.value = value;
-                        if (this.repeaterField.controlOptions.customValidation.length > 0) {
-                            checkBox.customValidation = this.repeaterField.controlOptions.customValidation;
-                        }
-                        this.renderComponentService.renderDynamicComponent(this.item, CheckBoxComponent, this.group, checkBox);
-                        break;
-                    //#endregion
-                    default:
-                        break;
+        if (changes.itemNumber?.previousValue) {
+            const oldName = this.buildControlName(changes.itemNumber.previousValue);
+            const value = this.group.controls[oldName].value;
+            this.item.clear();
+            this.group.removeControl(oldName);
+            const newName = this.buildControlName(changes.itemNumber.currentValue);
+            this.renderField(newName, value);
+        }
+    }
+    /**
+     * Extracts the value for the current item from itemsValue array
+     */
+    extractValueFromItemsValue() {
+        if (this.itemsValue.length > 0) {
+            this.itemValue = this.itemsValue[this.itemNumber];
+        }
+        if (this.itemValue) {
+            for (const key in this.itemValue) {
+                if (Object.prototype.hasOwnProperty.call(this.itemValue, key) &&
+                    key === this.repeaterField.controlOptions.name) {
+                    return this.itemValue[key];
                 }
             }
+        }
+        return null;
+    }
+    /**
+     * Builds the control name based on item number
+     */
+    buildControlName(itemNum) {
+        return `${this.repeaterField.controlOptions.name}.${itemNum}.${this.controlNumber}`;
+    }
+    /**
+     * Renders the field using the factory service
+     */
+    renderField(controlName, value) {
+        try {
+            const options = this.fieldConfigFactory.createFieldOptions(this.repeaterField.controlType, this.repeaterField.controlOptions, controlName, value);
+            const componentType = this.fieldConfigFactory.getComponentType(this.repeaterField.controlType);
+            this.renderComponentService.renderDynamicComponent(this.item, componentType, this.group, options);
+        }
+        catch (error) {
+            console.error('Error rendering field:', error);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RepeaterFieldBuilderComponent, deps: [{ token: RenderComponentService }, { token: i2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: RepeaterFieldBuilderComponent, isStandalone: true, selector: "repeater-field-builder", inputs: { group: "group", itemNumber: "itemNumber", controlNumber: "controlNumber", repeaterField: "repeaterField", itemsValue: "itemsValue" }, viewQueries: [{ propertyName: "item", first: true, predicate: ["Item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #Item></ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RepeaterFieldBuilderComponent, deps: [{ token: RenderComponentService }, { token: FieldConfigFactoryService }, { token: i2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: RepeaterFieldBuilderComponent, isStandalone: true, selector: "repeater-field-builder", inputs: { group: "group", itemNumber: "itemNumber", controlNumber: "controlNumber", repeaterField: "repeaterField", itemsValue: "itemsValue" }, providers: [FieldConfigFactoryService], viewQueries: [{ propertyName: "item", first: true, predicate: ["Item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #Item></ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RepeaterFieldBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'repeater-field-builder', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<ng-container #Item></ng-container>\r\n" }]
-        }], ctorParameters: () => [{ type: RenderComponentService }, { type: i2.FormGroupDirective }], propDecorators: { item: [{
+            args: [{ selector: 'repeater-field-builder', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [FieldConfigFactoryService], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<ng-container #Item></ng-container>\r\n" }]
+        }], ctorParameters: () => [{ type: RenderComponentService }, { type: FieldConfigFactoryService }, { type: i2.FormGroupDirective }], propDecorators: { item: [{
                 type: ViewChild,
                 args: ['Item', { read: ViewContainerRef }]
             }], group: [{
@@ -11571,8 +10811,7 @@ class RepeaterComponent {
             }
         }
         this.items.splice(deletedIndex, 1);
-        // this.items = 
-        //this.items.filter((res) => res != this.items[deletedIndex]);
+        this.originalItems.splice(Number(deletedIndex), 1);
     }
     addItem() {
         this.items.push(this.items.length);
@@ -11712,6 +10951,7 @@ class RepeaterTableComponent {
             }
         }
         this.items = this.items.filter((res) => res != this.items[deletedIndex]);
+        this.originalItems.splice(Number(deletedIndex), 1);
     }
     addItem() {
         if (this.items.length == 0)