[Major] Renamed tabIndex prop to tabIndexValue

projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html

@@ -68,8 +68,8 @@
     <td>
       If true, the date will be optional, showing <code>(Optional)</code>
       next to the label. Otherwise, the field will be considered required and an
-      error will be passed as a parameter to the OnBlur and onChange events
-      when it has not been filled.
+      error will be passed as a parameter to the OnBlur and onChange events when
+      it has not been filled.
     </td>
   </tr>
   <tr>
@@ -125,7 +125,7 @@
     <td>Size of the component ('medium' | 'large' | 'fillParent').</td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html

@@ -150,7 +150,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html

@@ -134,7 +134,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html

@@ -121,7 +121,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td></td>
     <td>Value of the tabindex attribute.</td>
   </tr>

projects/dxc-ngx-cdk-site/src/app/components/examples/select/select-properties/select-properties.component.html

@@ -32,8 +32,7 @@
     <td>options: Option[] | OptionGroup[]</td>
     <td></td>
     <td>
-      List of options. The following interfaces should be
-      imported. <br />
+      List of options. The following interfaces should be imported. <br />
       Option:
       <ul>
         <li>
@@ -71,7 +70,10 @@
     <td>
       <code>false</code>
     </td>
-    <td>If true, multiple options can be selected. If false, only a single option can be selected.</td>
+    <td>
+      If true, multiple options can be selected. If false, only a single option
+      can be selected.
+    </td>
   </tr>
   <tr>
     <td>disabled: boolean</td>
@@ -100,9 +102,10 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user select an option. An
-      object including the new value (or values) and the error (if the value selected is not
-      valid) will be passed to this function. An example of this object is:
+      This function will be called when the user select an option. An object
+      including the new value (or values) and the error (if the value selected
+      is not valid) will be passed to this function. An example of this object
+      is:
       {{ "{" }} <code>value: value, error: error</code>{{ "}" }}. If there is no
       error, error will be null.
     </td>
@@ -112,8 +115,8 @@
     <td></td>
     <td>
       This function will be called when the select loses the focus. An object
-      including the value (or values) and the error (if the value selected is not
-      valid) will be passed to this function. An example of this object is:
+      including the value (or values) and the error (if the value selected is
+      not valid) will be passed to this function. An example of this object is:
       {{ "{" }}
       <code>value: value, error: error</code>
       {{ "}" }}. If there is no error, error will be null.
@@ -139,7 +142,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html

@@ -189,7 +189,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/textarea/textarea-properties/textarea-properties.component.html

@@ -173,7 +173,7 @@
     </td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td>
       <code>0</code>
     </td>

projects/dxc-ngx-cdk-site/src/app/components/examples/toggleGroup/properties/toggleGroup-table-properties/toggleGroup-table-properties.component.html

@@ -1,4 +1,9 @@
-<dxc-heading [level]="4" weight="normal" text="Properties" [margin]="{bottom:'small'}"></dxc-heading>
+<dxc-heading
+  [level]="4"
+  weight="normal"
+  text="Properties"
+  [margin]="{ bottom: 'small' }"
+></dxc-heading>
 <dxc-table>
   <tr>
     <th>Name</th>
@@ -13,35 +18,31 @@
   <tr>
     <td>helperText: string</td>
     <td></td>
-    <td>
-      Assistive text to be placed bellow the input.
-    </td>
+    <td>Assistive text to be placed bellow the input.</td>
   </tr>
   <tr>
     <td>value: any | any[]</td>
     <td></td>
     <td>
-      Value(s) of the toggle(s) that are toggled. If undefined, the
-      component will be uncontrolled and the value will be managed internally by
-      the component.
+      Value(s) of the toggle(s) that are toggled. If undefined, the component
+      will be uncontrolled and the value will be managed internally by the
+      component.
     </td>
   </tr>
   <tr>
     <td>multiple: boolean</td>
     <td>
       <code>false</code>
     </td>
-    <td>
-      If false only one toggle can be toggled.
-    </td>
+    <td>If false only one toggle can be toggled.</td>
   </tr>
   <tr>
     <td>disabled: boolean</td>
     <td><code>false</code></td>
     <td>If true, the component will be disabled.</td>
   </tr>
   <tr>
-    <td>tabIndex: number</td>
+    <td>tabIndexValue: number</td>
     <td></td>
     <td>
       Value of the tabindex which its propagated to their children components.
@@ -51,8 +52,8 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user changes the state of any toggle.
-      The new value or values will be passed as a parameter.
+      This function will be called when the user changes the state of any
+      toggle. The new value or values will be passed as a parameter.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html

@@ -12,7 +12,6 @@
         [optional]="true"
         placeholder="Another placeholder"
         size="large"
-        tabIndex="3"
       >
       </dxc-select>
       <dxc-select

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.html

@@ -16,6 +16,7 @@
         [error]="errorMessage"
         [minLength]="minLength"
         [maxLength]="maxlength"
+        tabIndexValue="1"
       >
         <dxc-text-input-action>
           <svg

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/textarea-preview/textarea-preview.component.html

@@ -2,7 +2,12 @@
   <dxc-heading text="Light Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#FFFFFF">
     <tbuilder-component-mode text="Default">
-      <dxc-textarea label="Test" [pattern]="pattern" (onBlur)="onBlur($event)">
+      <dxc-textarea
+        label="Test"
+        [pattern]="pattern"
+        (onBlur)="onBlur($event)"
+        tabIndexValue="3"
+      >
       </dxc-textarea>
     </tbuilder-component-mode>
     <tbuilder-component-mode text="Invalid">

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/toggle-group-preview/toggle-group-preview.component.html

@@ -1,22 +1,47 @@
 <div>
   <tbuilder-component-mode text="Default">
-    <dxc-togglegroup margin="xsmall" label="Social networks" tabIndex="1" helperText="Choose a social network">
-      <dxc-toggle label="Facebook" value="test1" > </dxc-toggle>
-      <dxc-toggle label="Twitter" value="test2" > </dxc-toggle>
+    <dxc-togglegroup
+      margin="xsmall"
+      label="Social networks"
+      tabIndexValue="1"
+      helperText="Choose a social network"
+    >
+      <dxc-toggle label="Facebook" value="test1"> </dxc-toggle>
+      <dxc-toggle label="Twitter" value="test2"> </dxc-toggle>
       <dxc-toggle label="Linkedin" value="test3"> </dxc-toggle>
     </dxc-togglegroup>
   </tbuilder-component-mode>
 
   <tbuilder-component-mode text="Controlled">
-    <dxc-togglegroup label="Saiyans" helperText="Choose your favourite" [multiple]="true" [value]="value" margin="xsmall" (onChange)="callbackFunction($event)">
-        <dxc-toggle [label]="option.label" [value]="option.value" *ngFor="let option of controlledOptions"> </dxc-toggle>
+    <dxc-togglegroup
+      label="Saiyans"
+      helperText="Choose your favourite"
+      [multiple]="true"
+      [value]="value"
+      margin="xsmall"
+      (onChange)="callbackFunction($event)"
+    >
+      <dxc-toggle
+        [label]="option.label"
+        [value]="option.value"
+        *ngFor="let option of controlledOptions"
+      >
+      </dxc-toggle>
     </dxc-togglegroup>
   </tbuilder-component-mode>
 
-
   <tbuilder-component-mode text="Controlled and single">
-    <dxc-togglegroup [value]="singleValue" margin="xsmall" (onChange)="callbackFunction2($event)">
-        <dxc-toggle [label]="option.label" [value]="option.value" *ngFor="let option of controlledSingleOptions"> </dxc-toggle>
+    <dxc-togglegroup
+      [value]="singleValue"
+      margin="xsmall"
+      (onChange)="callbackFunction2($event)"
+    >
+      <dxc-toggle
+        [label]="option.label"
+        [value]="option.value"
+        *ngFor="let option of controlledSingleOptions"
+      >
+      </dxc-toggle>
     </dxc-togglegroup>
   </tbuilder-component-mode>
 

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.html

@@ -18,7 +18,7 @@
   mdePopoverTriggerOn="none"
   [mdePopoverOffsetX]="popOverOffsetX"
   [mdePopoverPositionX]="'before'"
-  [tabIndex]="tabIndex"
+  [tabIndexValue]="tabIndexValue"
   [autocomplete]="autocomplete"
 >
   <dxc-text-input-action>

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts

@@ -132,7 +132,7 @@ export class DxcDateInputComponent implements OnInit {
   /**
    * Value of the tabindex attribute.
    */
-  @Input() tabIndex: number = 0;
+  @Input() tabIndexValue: number = 0;
 
   @Input()
   autocomplete: string = "off";
@@ -149,7 +149,7 @@ export class DxcDateInputComponent implements OnInit {
     margin: "",
     size: "medium",
     format: "dd-MM-yyyy",
-    tabIndex: 0,
+    tabIndexValue: 0,
     placeholder: false,
   });
 

projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.html

@@ -9,11 +9,17 @@
   [size]="size"
   (onBlur)="handleOnBlur($event)"
   (onChange)="handleOnChange($event)"
-  [tabIndex]="tabIndex"
+  [tabIndexValue]="tabIndexValue"
   [disabled]="disabled"
   [optional]="optional"
   [autocomplete]="autocomplete"
 >
-  <ng-content select="dxc-text-input-suffix" ngProjectAs="dxc-text-input-suffix"></ng-content>
-  <ng-content select="dxc-text-input-prefix" ngProjectAs="dxc-text-input-prefix"></ng-content>
+  <ng-content
+    select="dxc-text-input-suffix"
+    ngProjectAs="dxc-text-input-suffix"
+  ></ng-content>
+  <ng-content
+    select="dxc-text-input-prefix"
+    ngProjectAs="dxc-text-input-prefix"
+  ></ng-content>
 </dxc-text-input>

projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts

@@ -154,7 +154,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
   /**
    * Value of the tabindex attribute.
    */
-  @Input() tabIndex: number = 0;
+  @Input() tabIndexValue: number = 0;
 
   private controlled: boolean;
 
@@ -171,7 +171,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
     step: 1,
     min: null,
     max: null,
-    tabIndex: 0,
+    tabIndexValue: 0,
     size: "medium",
   });
   /**

projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.html

@@ -13,7 +13,7 @@
   (onChange)="handleOnChange($event)"
   (onBlur)="handleOnBlur($event)"
   (onActionClick)="handleMaskPassword()"
-  [tabIndex]="tabIndex"
+  [tabIndexValue]="tabIndexValue"
   [autocomplete]="autocomplete"
 >
   <dxc-text-input-action>

projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts

@@ -61,7 +61,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
   maxLength: number;
 
   @Input()
-  tabIndex: number;
+  tabIndexValue: number;
 
   @Input()
   size: string = "medium";
@@ -75,7 +75,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
     value: undefined,
     label: "",
     margin: "",
-    tabIndex: 0,
+    tabIndexValue: 0,
     size: "medium",
     clearable: false,
   });

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.html

@@ -3,10 +3,14 @@
   <span *ngIf="optional" class="optionalLabel"> (Optional)</span>
 </div>
 <span *ngIf="helperText" class="helperText">{{ helperText }}</span>
-<div class="radio-list-container" role="radiogroup" [attr.aria-labelledby]="radioGroupId">
+<div
+  class="radio-list-container"
+  role="radiogroup"
+  [attr.aria-labelledby]="radioGroupId"
+>
   <ng-container *ngFor="let option of optionList; index as i">
     <dxc-radio-group-item
-      [tabindex]="indexToFocus === i && !option.disabled ? tabIndex : '-1'"
+      [tabindex]="indexToFocus === i && !option.disabled ? tabIndexValue : '-1'"
       [indexValue]="i"
       [value]="option.value"
       [label]="option.label"
@@ -16,5 +20,12 @@
     ></dxc-radio-group-item>
   </ng-container>
 </div>
-<input #inputRef class="valueInput" [name]="name" [value]="value" readOnly aria-hidden="true" />
-<span *ngIf="error || error===''" class="errorMessage">{{ error }}</span>
+<input
+  #inputRef
+  class="valueInput"
+  [name]="name"
+  [value]="value"
+  readOnly
+  aria-hidden="true"
+/>
+<span *ngIf="error || error === ''" class="errorMessage">{{ error }}</span>