Start valid range of elements with list values at 0

projects/common/components/ui-elements/dropdown.component.ts

@@ -23,7 +23,7 @@ import { DropdownElement } from '../../interfaces/elements';
                     [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
                     (click)="$event.preventDefault()">
         </mat-option>
-        <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i + 1"
+        <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i"
                     [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
           {{option}}
         </mat-option>

projects/common/components/ui-elements/likert-radio-button-group.component.ts

@@ -19,7 +19,7 @@ import { LikertRowElement } from '../../interfaces/elements';
 
       <mat-radio-button *ngFor="let column of [].constructor(elementModel.columnCount); let j = index"
                         [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
-                        [value]="j + 1"
+                        [value]="j"
                         [style.grid-column-start]="2 + j"
                         [style.grid-column-end]="3 + j"
                         [style.grid-row-start]="1"

projects/common/components/ui-elements/radio-button-group.component.ts

@@ -26,8 +26,8 @@ import { RadioButtonGroupElement } from '../../interfaces/elements';
         <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
                           [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
                                                   elementFormControl.value !== null &&
-                                                  elementFormControl.value !== i + 1 }"
-                          [value]="i + 1"
+                                                  elementFormControl.value !== i }"
+                          [value]="i"
                           [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
                           [style.line-height.%]="elementModel.styles.lineHeight">
           {{option}}

projects/common/components/ui-elements/radio-group-images.component.ts

@@ -29,7 +29,7 @@ import { RadioButtonGroupComplexElement } from '../../interfaces/elements';
            [style.grid-column-end]="2 + i"
            [style.grid-row-start]="2"
            [style.grid-row-end]="3"
-           (click)="selectOption(i + 1)">
+           (click)="selectOption(i)">
         <img *ngIf="option.imgSrc && option.position === 'above'"
              [style.object-fit]="'scale-down'"
              [style.max-width.%]="100"
@@ -52,7 +52,7 @@ import { RadioButtonGroupComplexElement } from '../../interfaces/elements';
         <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
                           aria-labelledby="radio-group-label"
                           [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
-                          [value]="i + 1"
+                          [value]="i"
                           [style.grid-column-start]="1 + i"
                           [style.grid-column-end]="2 + i"
                           [style.grid-row-start]="1"

projects/common/components/ui-elements/toggle-button.component.ts

@@ -12,10 +12,10 @@ import { ToggleButtonElement } from '../../interfaces/elements';
                                [style.width]="elementModel.dynamicWidth ? 'unset' : elementModel.width+'px'"
                                [vertical]="elementModel.verticalOrientation">
         <mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
-                           [value]="i + 1"
+                           [value]="i"
                            [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
                                                    elementFormControl.value !== null &&
-                                                   elementFormControl.value !== i + 1 }"
+                                                   elementFormControl.value !== i }"
                            [style.color]="elementModel.styles.fontColor"
                            [style.font-size.px]="elementModel.styles.fontSize"
                            [style.font-weight]="elementModel.styles.bold ? 'bold' : ''"
@@ -23,7 +23,7 @@ import { ToggleButtonElement } from '../../interfaces/elements';
                            [style.text-decoration]="elementModel.styles.underline ? 'underline' : ''"
                            [style.font-family]="elementModel.styles.font"
                            [style.background-color]="elementFormControl.value !== null &&
-                                                   elementFormControl.value === i + 1 ?
+                                                   elementFormControl.value === i ?
                                                    elementModel.selectionColor :
                                                    elementModel.styles.backgroundColor"
                            [style.line-height.%]="elementModel.styles.lineHeight">