From 2d59322ccd80e759b72cf0c5b7b5074909b48adb Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 22 Apr 2022 13:38:38 +0200
Subject: [PATCH 1/5] Error behaviour when empty string  in textInput

---
 .../text-input-properties.component.html      | 25 +++++++++++-------
 .../dxc-text-input.component.html             |  4 ++-
 .../dxc-text-input.component.spec.ts          | 26 +++++++++----------
 .../dxc-text-input.component.ts               |  6 ++---
 .../lib/dxc-text-input/emitted-value.type.ts  |  2 +-
 5 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
index 1c333571e..9420699f0 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
@@ -55,9 +55,12 @@
     <td>error: string</td>
     <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.
+      If it is a defined value and also a truthy string, the component will
+      change its appearance, showing the error below the input component. If the
+      defined value is an empty string, it will reserve a space below the
+      component for a future error, but it would not change its look. In case of
+      being undefined or null, both the appearance and the space for the error
+      message would not be modified.
     </td>
   </tr>
   <tr>
@@ -81,20 +84,22 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the input. The new
-      value will be passed as a parameter.
+      This event will emit when the user types within the input element
+      of the component. An object including the current value and the error (if
+      the value entered is not valid) will be passed to this function. An
+      example of this object is: { value: value, error: error }. If there is no
+      error, error will not be defined.
     </td>
   </tr>
   <tr>
     <td>onBlur: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the input loses the focus. An object
+      This event will emit when the input element loses the focus. An object
       including the input 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.
+      valid) will be passed to this function. An example of this object is: {
+      value: value, error: error }. If there is no error, error will not be
+      defined.
     </td>
   </tr>
   <tr>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
index 043fd1889..d7255a97f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
@@ -172,4 +172,6 @@
   </ul>
 </div>
 
-<span *ngIf="error && !disabled" class="inputErrorMessage">{{ error }}</span>
+<span *ngIf="(error || error === '') && !disabled" class="inputErrorMessage">{{
+  error
+}}</span>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
index a9b128b86..541195bb1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
@@ -147,7 +147,7 @@ describe("DxcNewTextInputComponent", () => {
     expect(input.getByText("helper text"));
     expect(screen.getByDisplayValue("test input value")).toBeTruthy();
     fireEvent.click(input.getByLabelText("Clear"));
-    expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
   });
 
   test("should allow interaction with action button", async () => {
@@ -238,7 +238,7 @@ describe("DxcNewTextInputComponent", () => {
     expect(input.getByText("helper text"));
     expect(screen.getByDisplayValue("test input value")).toBeTruthy();
     fireEvent.click(input.getByRole("textbox"));
-    expect(onChange).not.toHaveBeenCalledWith({ value: "", error: null });
+    expect(onChange).not.toHaveBeenCalledWith({ value: "", error: undefined });
   });
 
   test("controlled dxc-input-text input change and blur", async () => {
@@ -265,9 +265,9 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial" });
+    expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "initial" });
     await waitFor(() => {
       expect(screen.getByDisplayValue("initial"));
     });
@@ -296,9 +296,9 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue(""));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalledWith({ error: null, value: "new value" });
+    expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "new value" });
     await waitFor(() => {
       expect(screen.getByDisplayValue("new value"));
     });
@@ -353,15 +353,15 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial string"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     await waitFor(() => {
       fireEvent.blur(input);
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "initial string",
       });
       fireEvent.click(screen.getByLabelText("Clear"));
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       screen.getByDisplayValue("initial string");
     });
   });
@@ -407,7 +407,7 @@ describe("DxcNewTextInputComponent", () => {
     });
     fireEvent.click(screen.getByLabelText("Clear"));
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       expect(screen.getByDisplayValue("initial"));
     });
   });
@@ -454,7 +454,7 @@ describe("DxcNewTextInputComponent", () => {
     });
     fireEvent.click(screen.getByLabelText("Clear"));
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       expect(screen.getByDisplayValue("initial"));
     });
   });
@@ -484,11 +484,11 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial string"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     await waitFor(() => {
       fireEvent.blur(input);
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "initial string",
       });
       fireEvent.click(screen.getByLabelText("Clear"));
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
index ebc0ef214..bbd41f905 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
@@ -110,7 +110,7 @@ export class DxcTextInputComponent
    * the error below the input component. If it is not defined, the error
    * messages will be managed internally, but never displayed on its own.
    */
-  @Input() error: string = "";
+  @Input() error: string = undefined;
   /**
    * Regular expression that defines the valid format allowed by the input.
    * This will be checked when the input loses the focus. If the value entered
@@ -167,7 +167,7 @@ export class DxcTextInputComponent
 
   defaultInputs = new BehaviorSubject<TextInputProperties>({
     placeholder: "",
-    error: "",
+    error: undefined,
     clearable: false,
     optional: false,
     disabled: false,
@@ -504,7 +504,7 @@ export class DxcTextInputComponent
       return `Min length ${this.minLength}, Max length ${this.maxLength}`;
     if (value && !this.patternMatch(this.pattern, value))
       return `Please use a valid pattern`;
-    return null;
+    return undefined;
   }
 
   private handleValidationError() {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
index d2d7e6838..c2677290d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
@@ -1,6 +1,6 @@
 type EmittedValue = {
   value: string;
-  error: string;
+  error?: string;
 };
 
 export default EmittedValue;

From 197b89e2ca7b7dcbd95b53031c2260eb0e133b1b Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 25 Apr 2022 09:30:45 +0200
Subject: [PATCH 2/5] Adapting date and number to text input changes

---
 .../dxc-date-input.component.spec.ts               | 14 +++++++-------
 .../dxc-number-input.component.spec.ts             |  8 ++++----
 .../dxc-number-input/dxc-number-input.component.ts |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
index 7b50d09c8..c6ad77cd6 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
@@ -138,7 +138,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: newValue } });
     expect(onChange).toHaveBeenCalledWith({
       value: newValue,
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     expect(screen.getByDisplayValue(newValue));
@@ -180,7 +180,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: newValue } });
     expect(onChange).toHaveBeenCalledWith({
       value: newValue,
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     expect(screen.getByDisplayValue(newValue));
@@ -189,7 +189,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "04-10-1996" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "04-10-1996",
-      error: null,
+      error: undefined,
       date: new Date("1996/10/04"),
     });
     expect(screen.getByDisplayValue("04-10-1996"));
@@ -237,7 +237,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "1995/12/03" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "1995/12/03",
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     input.focus();
@@ -290,7 +290,7 @@ describe("DxcDate", () => {
 
     expect(onChange).toHaveBeenCalledWith({
       value: invalidValue,
-      error: null,
+      error: undefined,
       date: null,
     });
   });
@@ -481,14 +481,14 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "03-10-1996" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "03-10-1996",
-      error: null,
+      error: undefined,
       date: new Date("1996/10/03"),
     });
     expect(screen.getByDisplayValue("03-12-1995"));
     fireEvent.blur(input);
     waitFor(() => {
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "03-12-1995",
         date: new Date("1995/12/03"),
       });
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts
index 35c392ed4..bada23312 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts
@@ -80,7 +80,7 @@ describe("DxcNumberInputComponent", () => {
     input.focus();
     expect(input).toHaveFocus();
     fireEvent.click(screen.getByLabelText("Increment"));
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
   });
 
   test("decrease should call onChange in dxc-number", async () => {
@@ -105,7 +105,7 @@ describe("DxcNumberInputComponent", () => {
     input.focus();
     expect(input).toHaveFocus();
     fireEvent.click(screen.getByLabelText("Decrement"));
-    expect(onChange).toHaveBeenCalledWith({ value: "5", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "5", error: undefined });
   });
 
   test("controlled dxc-number", async () => {
@@ -135,7 +135,7 @@ describe("DxcNumberInputComponent", () => {
     expect(input.max).toBe("100");
     expect(screen.getByDisplayValue("4")).toBeTruthy();
     fireEvent.input(input, { target: { value: "10" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
     expect(screen.getByDisplayValue("4")).toBeTruthy();
   });
 
@@ -170,7 +170,7 @@ describe("DxcNumberInputComponent", () => {
     expect(input.max).toBe("100");
     expect(screen.getByDisplayValue("4"));
     fireEvent.input(input, { target: { value: "10" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
     expect(screen.getByDisplayValue("4"));
     fireEvent.blur(input);
     waitFor(() => {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
index 5b3c3dad8..1613d00dd 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
@@ -305,7 +305,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
       currentValue = coerceNumberProperty(this.value);
     }
     let calculatedValue = this.calculateMinus(currentValue);
-    this.handleOnChange({ value: calculatedValue.toString(), error: null });
+    this.handleOnChange({ value: calculatedValue.toString(), error: undefined });
     this.dxcInputRef.inputRef.nativeElement.focus();
   }
 
@@ -318,7 +318,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
       currentValue = coerceNumberProperty(this.value);
     }
     let calculatedValue = this.calculatePlus(currentValue);
-    this.handleOnChange({ value: calculatedValue.toString(), error: null });
+    this.handleOnChange({ value: calculatedValue.toString(), error: undefined });
     this.dxcInputRef.inputRef.nativeElement.focus();
   }
 

From 8d2e9cd9e981f4ccffc7e4626339a7526879d0a3 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 25 Apr 2022 12:35:23 +0200
Subject: [PATCH 3/5] updatinf documentation in other inputs

---
 .../date-properties.component.html            |  9 ++---
 .../number-properties.component.html          |  8 ++---
 .../password-properties.component.html        | 10 +++---
 .../text-input-properties.component.html      |  8 ++---
 .../dxc-date-input.component.ts               | 14 ++++----
 .../dxc-number-input.component.ts             |  8 ++---
 .../dxc-password-input.component.ts           | 10 +++---
 .../dxc-text-input.component.ts               | 33 +++++++++++--------
 8 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html
index 41a319736..b1f571981 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html
@@ -94,8 +94,9 @@
       the component. An object including the string value, the error and the
       date value will be emitted. An example of this object is:
       {{ "{" }} <code>value: value, error: error, date: date</code>{{ "}" }}. If
-      the string value is a valid date, <code>error</code> will be null. Also,
-      if the string value is not a valid date, <code>date</code> will be null.
+      the string value is a valid date, <code>error</code> will be undefined.
+      Also, if the string value is not a valid date, <code>date</code> will be
+      undefined.
     </td>
   </tr>
   <tr>
@@ -108,8 +109,8 @@
       {{ "{" }}
       <code>value: value, error: error, date: date</code>
       {{ "}" }}. If the string value is a valid date, <code>error</code> will be
-      null. Also, if the string value is not a valid date,
-      <code>date</code> will be null.
+      undefined. Also, if the string value is not a valid date,
+      <code>date</code> will be undefined.
     </td>
   </tr>
   <tr>
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html
index 429e559e9..52832569d 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html
@@ -70,7 +70,7 @@
       is lower than min, the onBlur and onChange functions will be called with
       the current value and an internal error informing that the current value
       is not correct. If a valid state is reached, the error parameter will be
-      null in both events.
+      undefined in both events.
     </td>
   </tr>
   <tr>
@@ -80,7 +80,7 @@
       Maximum value allowed by the number input. If the typed value by the user
       surpasses max, the onBlur and onChange functions will be called with the
       current value and an internal error informing that the current value is
-      not correct. If a valid state is reached, the error parameter will be null
+      not correct. If a valid state is reached, the error parameter will be undefined
       in both events.
     </td>
   </tr>
@@ -110,7 +110,7 @@
       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.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -121,7 +121,7 @@
       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.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html
index 98b0d459a..5c5a86dc5 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html
@@ -59,7 +59,7 @@
       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.
+      error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -71,7 +71,7 @@
       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.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -93,7 +93,7 @@
       pattern, the onBlur and onChange functions will be called with the current
       value and an internal error informing that this value does not match the
       pattern. If the pattern is met, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -106,7 +106,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -119,7 +119,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
index 9420699f0..06d4ef988 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
@@ -59,7 +59,7 @@
       change its appearance, showing the error below the input component. If the
       defined value is an empty string, it will reserve a space below the
       component for a future error, but it would not change its look. In case of
-      being undefined or null, both the appearance and the space for the error
+      being undefined or undefined, both the appearance and the space for the error
       message would not be modified.
     </td>
   </tr>
@@ -126,7 +126,7 @@
       does not match the pattern, the onBlur function will be called with the
       value entered and the error informing that the value does not match the
       pattern as parameters. If the pattern is accomplished, the error parameter
-      will be null.
+      will be undefined.
     </td>
   </tr>
   <tr>
@@ -154,7 +154,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -167,7 +167,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts
index 2277bbc8d..fb6c013fd 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts
@@ -147,14 +147,14 @@ export class DxcDateInputComponent implements OnInit {
 
   /**
    * This event will emit in case the user types within the input element of the component. An object including the string value,
-   * the error and the date value will be emitted. If the string value is a valid date, error will be null.
-   * Also, if the string value is not a valid date, date will be null.
+   * the error and the date value will be emitted. If the string value is a valid date, error will be undefined.
+   * Also, if the string value is not a valid date, date will be undefined.
    */
   @Output() onChange = new EventEmitter<EmittedValue>();
   /**
    * This event will emit in case the input element loses the focus. An object including the string value,
-   * the error and the date value will be emitted. If the string value is a valid date, error will be null.
-   * Also, if the string value is not a valid date, date will be null.
+   * the error and the date value will be emitted. If the string value is a valid date, error will be undefined.
+   * Also, if the string value is not a valid date, date will be undefined.
    */
   @Output() onBlur = new EventEmitter<EmittedValue>();
   /**
@@ -283,7 +283,7 @@ export class DxcDateInputComponent implements OnInit {
     let _dateReturn = {
       value: value.value,
       error: value.error,
-      date: _dateValue.isValid() ? _dateValue.toDate() : null,
+      date: _dateValue.isValid() ? _dateValue.toDate() : undefined,
     };
     this.onChange.emit(_dateReturn);
 
@@ -302,7 +302,7 @@ export class DxcDateInputComponent implements OnInit {
     this.onBlur.emit({
       value: event.value,
       error: event.error,
-      date: _dateValue.isValid() ? _dateValue.toDate() : null,
+      date: _dateValue.isValid() ? _dateValue.toDate() : undefined,
     });
     if (!this.controlled) {
       this.renderedValue = event.value;
@@ -315,7 +315,7 @@ export class DxcDateInputComponent implements OnInit {
     let _stringValue = this.getDateStringValue(value, this.format);
     let _dateReturn = {
       value: _stringValue,
-      date: value.isValid() ? value.toDate() : null,
+      date: value.isValid() ? value.toDate() : undefined,
       error: this.dxcInputRef.error,
     };
     this.onChange.emit(_dateReturn);
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
index 1613d00dd..494017595 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
@@ -75,7 +75,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * lower than min, the onBlur and onChange functions will be called with
    * the current value and an internal error informing that the current
    * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
+   * will be undefined in both events.
    */
   @Input()
   get min(): number {
@@ -90,7 +90,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * surpasses max, the onBlur and onChange functions will be called with
    * the current value and an internal error informing that the current
    * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
+   * will be undefined in both events.
    */
   @Input()
   get max(): number {
@@ -174,14 +174,14 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * This event will emit in case the user types within the input
    * element of the component. An object including the current value and
    * the error (if the value entered is not valid) will be passed to this
-   * function. If there is no error, error will be null.
+   * function. If there is no error, error will be undefined.
    */
   @Output() onChange = new EventEmitter<OnChangeEvent>();
   /**
    * This event will emit in case the number loses the focus.
    * An object including the input value and the error (if the value
    * entered is not valid) will be passed to this function. If there is no error,
-   * error will be null.
+   * error will be undefined.
    */
   @Output() onBlur = new EventEmitter<OnBlurEvent>();
   @ViewChild("dxcInputRef", { static: false })
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
index 5a22ddb22..65cae5078 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
@@ -73,7 +73,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
    * the pattern, the onBlur and onChange functions will be called with the
    * current value and an internal error informing that this value does not
    * match the pattern. If the pattern is met, the error parameter of both
-   * events will be null.
+   * events will be undefined.
    */
   @Input() pattern: string;
   /**
@@ -83,7 +83,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
    * comply the minimum length, the onBlur and onChange functions will be called
    * with the current value and an internal error informing that the value
    * length does not comply the specified range. If a valid length is
-   * reached, the error parameter of both events will be null.
+   * reached, the error parameter of both events will be undefined.
    */
   @Input() minLength: number;
   /**
@@ -93,7 +93,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
    * comply the maximum length, the onBlur and onChange functions will be called
    * with the current value and an internal error informing that the value
    * length does not comply the specified range. If a valid length is
-   * reached, the error parameter of both events will be null.
+   * reached, the error parameter of both events will be undefined.
    */
   @Input() maxLength: number;
   /**
@@ -135,13 +135,13 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
    * This function will be called when the user types within the input
    * element of the component. An object including the current value and
    * the error (if the value entered is not valid) will be passed to this
-   * function. If there is no error, error will be null.
+   * function. If there is no error, error will be undefined.
    * */
   @Output() onChange = new EventEmitter<EmittedValue>();
   /**
    * This function will be called when the input element loses the focus.
    * An object including the input value and the error (if the value entered is
-   * not valid) will be passed to this function. If there is no error, error will be null.
+   * not valid) will be passed to this function. If there is no error, error will be undefined.
    */
   @Output() onBlur = new EventEmitter<EmittedValue>();
 
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
index bbd41f905..db8abc25d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
@@ -106,9 +106,12 @@ export class DxcTextInputComponent
    */
   @Input() clearable: boolean = false;
   /**
-   * 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 managed internally, but never displayed on its own.
+   * If it is a defined value and also a truthy string, the component will
+   * change its appearance, showing the error below the input component. If the
+   * defined value is an empty string, it will reserve a space below the
+   * component for a future error, but it would not change its look. In case of
+   * being undefined or null, both the appearance and the space for the error
+   * message would not be modified.
    */
   @Input() error: string = undefined;
   /**
@@ -117,7 +120,7 @@ export class DxcTextInputComponent
    * does not match the pattern, the onBlur event will emit with the value
    * entered and the error informing that the value does not match the pattern
    * as parameters. If the pattern is accomplished, the error parameter will be
-   * null.
+   * undefined.
    */
   @Input() pattern: string;
   /**
@@ -126,7 +129,7 @@ export class DxcTextInputComponent
    * the string entered does not comply the minimum length, the onBlur and
    * onChange events will emit with the current value and an internal error
    * informing that the value length does not comply the specified range. If a
-   * valid length is reached, the error parameter of both events will be null.
+   * valid length is reached, the error parameter of both events will be undefined.
    */
   @Input() minLength: number;
   /**
@@ -135,7 +138,7 @@ export class DxcTextInputComponent
    * the string entered does not comply the maximum length, the onBlur and
    * onChange events will emit with the current value and an internal error
    * informing that the value length does not comply the specified range. If a
-   * valid length is reached, the error parameter of both events will be null.
+   * valid length is reached, the error parameter of both events will be undefined.
    */
   @Input() maxLength: number;
   /**
@@ -181,18 +184,20 @@ export class DxcTextInputComponent
     size: "medium",
   });
   /**
-   * This event will be emit when the user types within the input
-   * element of the component. An object including the current value and
-   * the error (if the value entered is not valid) will be passed to this
-   * event. If there is no error, error will be null.
+   * This event will emit when the user types within the input element
+   * of the component. An object including the current value and the error (if
+   * the value entered is not valid) will be passed to this function. An
+   * example of this object is: { value: value, error: error }. If there is no
+   * error, error will not be defined.
    */
   @Output()
   onChange = new EventEmitter<EmittedValue>();
   /**
-   * This event will emit when the input element loses the focus.
-   * An object including the input value and the error (if the value
-   * entered is not valid) will be passed to this event. If there is no error,
-   * error will be null.
+   * This event will emit when the input element loses the focus. An object
+   * including the input value and the error (if the value entered is not
+   * valid) will be passed to this function. An example of this object is: {
+   * value: value, error: error }. If there is no error, error will not be
+   * defined.
    */
   @Output()
   onBlur = new EventEmitter<EmittedValue>();

From 1b439854d2c53abfc49f73301413fa3c0237a47c Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 25 Apr 2022 15:19:36 +0200
Subject: [PATCH 4/5] fixing error

---
 .../text-input-properties.component.html                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
index 06d4ef988..98e5ddacc 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
@@ -87,7 +87,7 @@
       This event will emit when the user types within the input element
       of the component. An object including the current value and the error (if
       the value entered is not valid) will be passed to this function. An
-      example of this object is: { value: value, error: error }. If there is no
+      example of this object is: {{ "{" }} value: value, error: error {{ "}" }}. If there is no
       error, error will not be defined.
     </td>
   </tr>
@@ -97,8 +97,8 @@
     <td>
       This event will emit when the input element loses the focus. An object
       including the input value and the error (if the value entered is not
-      valid) will be passed to this function. An example of this object is: {
-      value: value, error: error }. If there is no error, error will not be
+      valid) will be passed to this function. An example of this object is: {{ "{" }}
+      value: value, error: error {{ "}" }}. If there is no error, error will not be
       defined.
     </td>
   </tr>

From 2a4ebda6508cb0d1da6ec661c7dca4ed19b494bc Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 25 Apr 2022 15:33:21 +0200
Subject: [PATCH 5/5] Updating date test case

---
 .../src/lib/dxc-date-input/dxc-date-input.component.spec.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
index c6ad77cd6..2e55aa4dc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
@@ -291,7 +291,7 @@ describe("DxcDate", () => {
     expect(onChange).toHaveBeenCalledWith({
       value: invalidValue,
       error: undefined,
-      date: null,
+      date: undefined,
     });
   });