Merge pull request #616 from dxc-technology/fix-597

[Minor] Added new prop autocomplete on inputs components

Author: mawelCaballero

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

@@ -126,4 +126,15 @@
     </td>
     <td>Value of the tabindex attribute.</td>
   </tr>
+  <tr>
+    <td>autocomplete: string</td>
+    <td><code>'off'</code></td>
+    <td>
+      HTML autocomplete attribute. Lets the user specify if any permission the
+      user agent has to provide automated assistance in filling out the input
+      value. Its value must be one of all the possible values of the HTML
+      autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password',
+      ...
+    </td>
+  </tr>
 </dxc-table>

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

@@ -86,8 +86,8 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the number. An object
-      including the new value and the error will be passed to this
+      This function will be called when the user types within the number. An
+      object including the new value and the error will be passed to this
       function. An example of this object is:
       {{ "{" }}
       <code>value: value, error: error</code>
@@ -132,4 +132,15 @@
     </td>
     <td>Value of the tabindex attribute.</td>
   </tr>
+  <tr>
+    <td>autocomplete: string</td>
+    <td><code>'off'</code></td>
+    <td>
+      HTML autocomplete attribute. Lets the user specify if any permission the
+      user agent has to provide automated assistance in filling out the input
+      value. Its value must be one of all the possible values of the HTML
+      autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password',
+      ...
+    </td>
+  </tr>
 </dxc-table>

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

@@ -14,8 +14,8 @@
     <td>value: string</td>
     <td></td>
     <td>
-      Value of the input element. If undefined, the component will be uncontrolled
-      and the value will be managed internally by the component.
+      Value of the input element. If undefined, the component will be
+      uncontrolled and the value will be managed internally by the component.
     </td>
   </tr>
   <tr>
@@ -56,10 +56,10 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the input
-      element of the component. An
-      object including the value and the error (if the value entered is not
-      valid) will be passed to this function. An example of this object is:
+      This function will be called when the user types within the input element
+      of the component. An object including the value and the error (if the
+      value entered 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>
@@ -68,9 +68,9 @@
     <td>onBlur: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the input element loses the focus. An object
-      including the value and the error (if the value entered is not valid) will
-      be passed to this function. An example of this object is:
+      This function will be called when the input element loses the focus. An
+      object including the value and the error (if the value entered 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.
@@ -128,4 +128,15 @@
     </td>
     <td>Value of the tabindex attribute.</td>
   </tr>
+  <tr>
+    <td>autocomplete: string</td>
+    <td><code>'off'</code></td>
+    <td>
+      HTML autocomplete attribute. Lets the user specify if any permission the
+      user agent has to provide automated assistance in filling out the input
+      value. Its value must be one of all the possible values of the HTML
+      autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password',
+      ...
+    </td>
+  </tr>
 </dxc-table>

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

@@ -51,17 +51,16 @@
     <td></td>
     <td>
       If it is defined, the component will change its appearance, showing the
-      error below the input component. If it is not defined, the error messages will be created and managed internally.
+      error below the input component. If it is not defined, the error messages
+      will be created and managed internally.
     </td>
   </tr>
   <tr>
     <td>clearable: boolean</td>
     <td>
       <code>false</code>
     </td>
-    <td>
-      If true, the input will have an action to clear the entered value.
-    </td>
+    <td>If true, the input will have an action to clear the entered value.</td>
   </tr>
   <tr>
     <td>optional: boolean</td>
@@ -120,6 +119,16 @@
       will be null.
     </td>
   </tr>
+  <tr>
+    <td>autocomplete: string</td>
+    <td><code>'off'</code></td>
+    <td>
+      HTML autocomplete attribute. Lets the user specify if any permission the
+      user agent has to provide automated assistance in filling out the input
+      value. Its value must be one of all the possible values of the HTML
+      autocomplete attribute. Please check the documentation <dxc-link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete" text="here"></dxc-link>.
+    </td>
+  </tr>
   <tr>
     <td>length: object</td>
     <td></td>

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

@@ -95,8 +95,8 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the textarea. An object
-      including the new value and the error will be passed to this
+      This function will be called when the user types within the textarea. An
+      object including the new value and the error will be passed to this
       function. An example of this object is:
       {{ "{" }}
       <code>value: value, error: error</code>
@@ -167,4 +167,15 @@
     </td>
     <td>Value of the tabindex attribute.</td>
   </tr>
+  <tr>
+    <td>autocomplete: string</td>
+    <td><code>'off'</code></td>
+    <td>
+      HTML autocomplete attribute. Lets the user specify if any permission the
+      user agent has to provide automated assistance in filling out the textarea
+      value. Its value must be one of all the possible values of the HTML
+      autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password',
+      ...
+    </td>
+  </tr>
 </dxc-table>

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

@@ -21,6 +21,7 @@
   [mdePopoverOffsetX]="popOverOffsetX"
   [mdePopoverPositionX]="'before'"
   [tabIndex]="tabIndex"
+  [autocomplete]="autocomplete"
 >
   <dxc-text-input-action>
     <svg

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

@@ -98,6 +98,9 @@ export class DxcDateInputComponent implements OnInit {
   @Input()
   tabIndex: number;
 
+  @Input()
+  autocomplete: string = "off";
+
   defaultInputs = new BehaviorSubject<any>({
     error: "",
     clearable: false,

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

@@ -12,6 +12,7 @@
   [tabIndex]="tabIndex"
   [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>

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

@@ -101,6 +101,9 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   size: string = "medium";
 
+  @Input()
+  autocomplete: string = "off";
+
   private controlled: boolean;
 
   defaultInputs = new BehaviorSubject<any>({

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

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