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 d066ff9ac..510bdabd8 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
@@ -99,17 +99,29 @@
- length: object
+ minLength: number
- Specifies the minimun and maximum length allowed by the password. It
- follows this structure: {{ "{" }}
- min: minLength, max: maxLength
- {{ "}" }}. This will be checked when the user types within the password.
- If the value entered does not comply the length, the onChange function
- will be called with the value entered and the error informing that the
- value does not comply the length as parameters. If the length is
- accomplished, the error parameter will be null.
+ Specifies the minimun length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
+
+
+
+ maxLength: number
+
+ Specifies the maximum length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
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 1ea463f73..2aa92d7a3 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
@@ -126,21 +126,38 @@
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
- length: object
+ minLength: number
- Specifies the minimun and maximum length allowed by the input. It follows
- this structure: {{ "{" }}
- min: minLength, max: maxLength
- {{ "}" }}. This will be checked when the user types within the input. If
- the value entered does not comply the length, the onChange function will
- be called with the value entered and the error informing that the value
- does not comply the length as parameters. If the length is accomplished,
- the error parameter will be null.
+ Specifies the minimun length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
+
+
+
+ maxLength: number
+
+ Specifies the maximum length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/textarea/textarea-properties/textarea-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/textarea/textarea-properties/textarea-properties.component.html
index 29a4eb8a2..02414c116 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/textarea/textarea-properties/textarea-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/textarea/textarea-properties/textarea-properties.component.html
@@ -128,17 +128,29 @@
- length: object
+ minLength: number
- Specifies the minimun and maximum length allowed by the textarea. It
- follows this structure: {{ "{" }}
- min: minLength, max: maxLength
- {{ "}" }}. This will be checked when the textarea loses the focus. If the
- value entered does not comply the length, the onBlur function will be
- called with the value entered and the error informing that the value does
- not comply the length as parameters. If the length is accomplished, the
- error parameter will be null.
+ Specifies the minimun length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
+
+
+
+ maxLength: number
+
+ Specifies the maximum length allowed by the input. This will be checked
+ both when the input element loses the focus and while typing within it. If
+ the string entered does not 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.
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.html
index ffb6f69bb..9f6bc2729 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.html
@@ -2,81 +2,169 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
-
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.ts
index 76544e5dc..5ea2aac5c 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/text-input-preview/text-input-preview.component.ts
@@ -19,7 +19,8 @@ export class TextInputPreviewComponent implements OnInit {
errorMessage = "";
- lengthLimit = { min: 2, max: 5 };
+ minLength = 2;
+ maxLength = 5;
options: Array = [
"Afghanistan",
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/textarea-preview/textarea-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/textarea-preview/textarea-preview.component.html
index a85393b4c..bfb32027a 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/textarea-preview/textarea-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/textarea-preview/textarea-preview.component.html
@@ -1,33 +1,19 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.html
index 013ff4e21..3210a7448 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.html
@@ -7,7 +7,8 @@
[helperText]="helperText"
[margin]="margin"
[pattern]="pattern"
- [length]="length"
+ [minLength]="minLength"
+ [maxLength]="maxLength"
[size]="size"
(onChange)="handleOnChange($event)"
(onBlur)="handleOnBlur($event)"
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.spec.ts
index bf4ab911a..238f8c854 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.spec.ts
@@ -37,7 +37,10 @@ describe("DxcPasswordInputComponent", () => {
expect(screen.queryByText("test-input")).toBeInTheDocument();
expect(screen.getByDisplayValue("password-test")).toBeTruthy();
fireEvent.click(btn);
- expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "",
+ error: "This field is required. Please, enter a value.",
+ });
});
test("should mask input password", async () => {
@@ -89,23 +92,29 @@ describe("DxcPasswordInputComponent", () => {
expect(input).toHaveFocus();
expect(screen.getByDisplayValue("initial"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: "Please use a valid pattern" });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "new value",
+ error: "Please use a valid pattern",
+ });
expect(screen.getByDisplayValue("initial"));
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: "Please use a valid pattern", value: "initial" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Please use a valid pattern",
+ value: "initial",
+ });
});
test("controlled dxc-password onError length", async () => {
const onChange = jest.fn();
const onBlur = jest.fn();
- const lengthLimit = { min: 2, max: 5 };
await render(DxcPasswordInputComponent, {
componentProperties: {
label: "test-input",
clearable: true,
value: "initial",
- length: lengthLimit,
+ minLength: 2,
+ maxLength: 5,
onChange: {
emit: onChange,
} as any,
@@ -121,9 +130,15 @@ describe("DxcPasswordInputComponent", () => {
expect(input).toHaveFocus();
expect(screen.getByDisplayValue("initial"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: "Min length 2, Max length 5" });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "new value",
+ error: "Min length 2, Max length 5",
+ });
expect(screen.getByDisplayValue("initial"));
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: "Min length 2, Max length 5", value: "initial" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Min length 2, Max length 5",
+ value: "initial",
+ });
});
});
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 df4aa72b1..7b83d076e 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
@@ -55,7 +55,10 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
margin: Object | string;
@Input()
- length = { min: undefined, max: undefined };
+ minLength: number;
+
+ @Input()
+ maxLength: number;
@Input()
tabIndex: number;
@@ -140,16 +143,15 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
)}`;
}
-
- handleOnChange({value, error}) {
+ handleOnChange({ value, error }) {
this.cdRef.detectChanges();
- this.onChange.emit({value, error});
+ this.onChange.emit({ value, error });
this.controlled
? (this.dxcInputRef.inputRef.nativeElement.value = this.value)
: (this.value = value);
}
- handleOnBlur({value, error}) {
+ handleOnBlur({ value, error }) {
this.onBlur.emit({ value: value, error: error });
if (!this.controlled) {
this.value = value;
@@ -166,5 +168,4 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
? "Show"
: "Hide";
}
-
}
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 a3645589c..539f06544 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
@@ -121,7 +121,7 @@ describe("DxcNewTextInputComponent", () => {
expect(screen.getByDisplayValue("test input value")).toBeTruthy();
fireEvent.click(input.getByLabelText("Clear"));
input.detectChanges();
- expect(onChange).toHaveBeenCalledWith({value: "", error: null});
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
});
test("should allow interaction with action button", async () => {
@@ -204,7 +204,7 @@ describe("DxcNewTextInputComponent", () => {
expect(screen.getByDisplayValue("test input value")).toBeTruthy();
fireEvent.click(input.getByRole("textbox"));
input.detectChanges();
- expect(onChange).not.toHaveBeenCalledWith({value: "", error: null});
+ expect(onChange).not.toHaveBeenCalledWith({ value: "", error: null });
});
test("controlled dxc-input-text input change and blur", async () => {
@@ -231,7 +231,7 @@ 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: null });
fireEvent.blur(input);
expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial" });
await waitFor(() => {
@@ -262,7 +262,7 @@ 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: null });
fireEvent.blur(input);
expect(onBlur).toHaveBeenCalledWith({ error: null, value: "new value" });
await waitFor(() => {
@@ -284,7 +284,7 @@ describe("DxcNewTextInputComponent", () => {
onBlur: {
emit: onBlur,
} as any,
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
providers: [DxcTextInputService],
@@ -296,12 +296,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: null });
await waitFor(() => {
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial string" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: null,
+ value: "initial string",
+ });
fireEvent.click(screen.getByLabelText("Clear"));
- expect(onChange).toHaveBeenCalledWith({value: "", error: null});
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
screen.getByDisplayValue("initial string");
});
});
@@ -321,7 +324,7 @@ describe("DxcNewTextInputComponent", () => {
onBlur: {
emit: onBlur,
} as any,
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
providers: [DxcTextInputService],
@@ -333,7 +336,10 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue("initial"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({value: "new value", error: "Please use a valid pattern"});
+ expect(onChange).toHaveBeenCalledWith({
+ value: "new value",
+ error: "Please use a valid pattern",
+ });
fireEvent.blur(input);
await waitFor(() => {
expect(screen.getByDisplayValue("initial"));
@@ -344,7 +350,7 @@ describe("DxcNewTextInputComponent", () => {
});
fireEvent.click(screen.getByLabelText("Clear"));
await waitFor(() => {
- expect(onChange).toHaveBeenCalledWith({value: "", error: null});
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
expect(screen.getByDisplayValue("initial"));
});
});
@@ -352,20 +358,20 @@ describe("DxcNewTextInputComponent", () => {
test("controlled dxc-input-text onError length", async () => {
const onChange = jest.fn();
const onBlur = jest.fn();
- const lengthLimit = { min: 2, max: 5 };
await render(DxcTextInputComponent, {
componentProperties: {
label: "Input label",
value: "initial",
clearable: true,
- length: lengthLimit,
+ minLength: 2,
+ maxLength: 5,
onChange: {
emit: onChange,
} as any,
onBlur: {
emit: onBlur,
} as any,
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
providers: [DxcTextInputService],
@@ -377,7 +383,10 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue("initial"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({value: "new value", error: "Min length 2, Max length 5"});
+ expect(onChange).toHaveBeenCalledWith({
+ value: "new value",
+ error: "Min length 2, Max length 5",
+ });
fireEvent.blur(input);
await waitFor(() => {
expect(screen.getByDisplayValue("initial"));
@@ -388,7 +397,7 @@ describe("DxcNewTextInputComponent", () => {
});
fireEvent.click(screen.getByLabelText("Clear"));
await waitFor(() => {
- expect(onChange).toHaveBeenCalledWith({value: "", error: null});
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
expect(screen.getByDisplayValue("initial"));
});
});
@@ -418,15 +427,19 @@ 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: null });
await waitFor(() => {
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial string" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: null,
+ value: "initial string",
+ });
fireEvent.click(screen.getByLabelText("Clear"));
- expect(onChange).toHaveBeenCalledWith({value: "", error: "This field is required. Please, enter a value."});
+ expect(onChange).toHaveBeenCalledWith({
+ value: "",
+ error: "This field is required. Please, enter a value.",
+ });
screen.getByDisplayValue("initial string");
});
});
});
-
-
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 e4da905b4..e1f60fdbe 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
@@ -99,7 +99,10 @@ export class DxcTextInputComponent
pattern = "";
@Input()
- length = { min: undefined, max: undefined };
+ minLength: number;
+
+ @Input()
+ maxLength: number;
@Input()
margin: Object | string;
@@ -441,7 +444,7 @@ export class DxcTextInputComponent
if (this.isRequired(value))
return `This field is required. Please, enter a value.`;
if (this.isLengthIncorrect(value))
- return `Min length ${this.length.min}, Max length ${this.length.max}`;
+ return `Min length ${this.minLength}, Max length ${this.maxLength}`;
if (value && !this.patternMatch(this.pattern, value))
return `Please use a valid pattern`;
return null;
@@ -457,11 +460,10 @@ export class DxcTextInputComponent
private isLengthIncorrect = (value) =>
(value !== "" &&
- this.length &&
- this.length.min &&
+ this.minLength &&
value &&
- value.length < +this.length.min) ||
- (this.length.max && value && value.length > +this.length.max);
+ value.length < +this.minLength) ||
+ (this.maxLength && value && value.length > +this.maxLength);
getAsyncSuggestions() {
this.loading.next(true);
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.spec.ts
index bb041f02d..74e5509ce 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.spec.ts
@@ -1,11 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { fireEvent, render } from '@testing-library/angular';
-import { screen, waitFor } from '@testing-library/dom';
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { fireEvent, render } from "@testing-library/angular";
+import { screen, waitFor } from "@testing-library/dom";
-import { DxcTextareaComponent } from './dxc-textarea.component';
+import { DxcTextareaComponent } from "./dxc-textarea.component";
-describe('DxcTextareaComponent', () => {
+describe("DxcTextareaComponent", () => {
test("should render dxc-text-input", async () => {
const input = await render(DxcTextareaComponent, {
componentProperties: {
@@ -31,7 +31,7 @@ describe('DxcTextareaComponent', () => {
const input = await render(DxcTextareaComponent, {
componentProperties: {
label: "Example label",
- helperText: "Example helper text"
+ helperText: "Example helper text",
},
imports: [CommonModule, FormsModule],
});
@@ -43,7 +43,7 @@ describe('DxcTextareaComponent', () => {
componentProperties: {
label: "Example label",
helperText: "Example helper text",
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
@@ -54,7 +54,7 @@ describe('DxcTextareaComponent', () => {
test("Renders with correct placeholder", async () => {
await render(DxcTextareaComponent, {
componentProperties: {
- placeholder: "Placeholder"
+ placeholder: "Placeholder",
},
imports: [CommonModule, FormsModule],
});
@@ -64,7 +64,7 @@ describe('DxcTextareaComponent', () => {
test("Renders with error message", async () => {
await render(DxcTextareaComponent, {
componentProperties: {
- error: "Error message"
+ error: "Error message",
},
imports: [CommonModule, FormsModule],
});
@@ -96,19 +96,27 @@ describe('DxcTextareaComponent', () => {
} as any,
margin: "medium",
pattern: '^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? "]).*$',
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: "Please use a valid pattern" });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "new value",
+ error: "Please use a valid pattern",
+ });
fireEvent.blur(textarea);
- expect(onBlur).toHaveBeenCalledWith({ error: "Please use a valid pattern", value: "new value" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Please use a valid pattern",
+ value: "new value",
+ });
expect(screen.getByDisplayValue("new value"));
textarea.focus();
expect(textarea).toHaveFocus();
@@ -122,7 +130,6 @@ describe('DxcTextareaComponent', () => {
test("Strict mode - Length constraint", async () => {
const onChange = jest.fn();
const onBlur = jest.fn();
- const length = { min: 5, max: 10 };
await render(DxcTextareaComponent, {
componentProperties: {
label: "Example label",
@@ -134,19 +141,25 @@ describe('DxcTextareaComponent', () => {
emit: onBlur,
} as any,
margin: "medium",
- length: length,
- optional: true
+ minLength: 5,
+ maxLength: 10,
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "test" } });
fireEvent.blur(textarea);
await waitFor(() => {
- expect(onBlur).toHaveBeenCalledWith({ error: "Min length 5, Max length 10", value: "test" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Min length 5, Max length 10",
+ value: "test",
+ });
});
textarea.focus();
expect(textarea).toHaveFocus();
@@ -160,7 +173,6 @@ describe('DxcTextareaComponent', () => {
test("Strict mode - Pattern and length constraints", async () => {
const onChange = jest.fn();
const onBlur = jest.fn();
- const length = { min: 5, max: 10 };
await render(DxcTextareaComponent, {
componentProperties: {
label: "Example label",
@@ -173,25 +185,34 @@ describe('DxcTextareaComponent', () => {
} as any,
margin: "medium",
pattern: '^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? "]).*$',
- length: length,
- optional: true
+ minLength: 5,
+ maxLength: 10,
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "test" } });
fireEvent.blur(textarea);
- expect(onBlur).toHaveBeenCalledWith({ error: "Min length 5, Max length 10", value: "test" });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Min length 5, Max length 10",
+ value: "test",
+ });
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "test " } });
fireEvent.blur(textarea);
- expect(onBlur).toHaveBeenCalledWith({ error: "Please use a valid pattern", value: "test " });
+ expect(onBlur).toHaveBeenCalledWith({
+ error: "Please use a valid pattern",
+ value: "test ",
+ });
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
@@ -218,12 +239,14 @@ describe('DxcTextareaComponent', () => {
emit: onBlur,
} as any,
margin: "medium",
- pattern: '^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$',
- optional: true
+ pattern: '^.*(?=.*[a-zA-Z])(?=.*d)(?=.*[!&$%&? "]).*$',
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
@@ -238,7 +261,6 @@ describe('DxcTextareaComponent', () => {
expect(value).toBe("Example value");
expect(error).toBe("Min length 5, Max length 10");
});
- const length = { min: 5, max: 10 };
await render(DxcTextareaComponent, {
componentProperties: {
label: "Example label",
@@ -250,12 +272,15 @@ describe('DxcTextareaComponent', () => {
emit: onBlur,
} as any,
margin: "medium",
- length: length,
- optional: true
+ minLength: 5,
+ maxLength: 10,
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
@@ -270,7 +295,6 @@ describe('DxcTextareaComponent', () => {
expect(value).toBe("Example value");
expect(error).toBe("Min length 5, Max length 10");
});
- const length = { min: 5, max: 10 };
await render(DxcTextareaComponent, {
componentProperties: {
label: "Example label",
@@ -282,12 +306,15 @@ describe('DxcTextareaComponent', () => {
emit: onBlur,
} as any,
margin: "medium",
- length: length,
- optional: true
+ minLength: 5,
+ maxLength: 10,
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
@@ -302,11 +329,13 @@ describe('DxcTextareaComponent', () => {
onBlur: {
emit: onBlur,
} as any,
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
@@ -329,25 +358,29 @@ describe('DxcTextareaComponent', () => {
emit: onBlur,
} as any,
margin: "medium",
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "Controlled test" } });
await waitFor(() => {
expect(screen.getByDisplayValue("test"));
- expect(onChange).toHaveBeenCalledWith({ value: "Controlled test", error: null });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "Controlled test",
+ error: null,
+ });
});
fireEvent.blur(textarea);
await waitFor(() => {
expect(onBlur).toHaveBeenCalled();
expect(onBlur).toHaveBeenCalledWith({ value: "test", error: null });
});
-
});
test("Uncontrolled input", async () => {
const onChange = jest.fn();
@@ -357,17 +390,22 @@ describe('DxcTextareaComponent', () => {
onChange: {
emit: onChange,
} as any,
- optional: true
+ optional: true,
},
imports: [CommonModule, FormsModule],
});
- const textarea = screen.getByLabelText("Example label (Optional)");
+ const textarea = (
+ screen.getByLabelText("Example label (Optional)")
+ );
textarea.focus();
expect(textarea).toHaveFocus();
fireEvent.click(textarea);
fireEvent.input(textarea, { target: { value: "Uncontrolled test" } });
expect(onChange).toHaveBeenCalled();
- expect(onChange).toHaveBeenCalledWith({ value: "Uncontrolled test", error: null });
+ expect(onChange).toHaveBeenCalledWith({
+ value: "Uncontrolled test",
+ error: null,
+ });
expect(textarea.value).toBe("Uncontrolled test");
});
});
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
index db37950ff..47b38bc37 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
@@ -85,7 +85,10 @@ export class DxcTextareaComponent implements OnInit {
pattern = "";
@Input()
- length = { min: undefined, max: undefined };
+ minLength: number;
+
+ @Input()
+ maxLength: number;
@Input()
margin: Object | string;
@@ -221,7 +224,7 @@ export class DxcTextareaComponent implements OnInit {
if (this.isRequired(value))
return `This field is required. Please, enter a value.`;
if (this.isLengthIncorrect(value))
- return `Min length ${this.length.min}, Max length ${this.length.max}`;
+ return `Min length ${this.minLength}, Max length ${this.maxLength}`;
if (value && !this.patternMatch(this.pattern, value))
return `Please use a valid pattern`;
return null;
@@ -242,11 +245,10 @@ export class DxcTextareaComponent implements OnInit {
private isLengthIncorrect = (value) =>
(value !== "" &&
- this.length &&
- this.length.min &&
+ this.minLength &&
value &&
- value.length < +this.length.min) ||
- (this.length.max && value && value.length > +this.length.max);
+ value.length < +this.minLength) ||
+ (this.maxLength && value && value.length > +this.maxLength);
private checkHeight() {
if (this.textareaRef) {