From 5729d67a5780b06a97e0684643eea47a711f5c6a Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 31 Mar 2022 16:09:21 +0200
Subject: [PATCH] [Minor] Adding new property to file input

---
 .../file-input-properties.component.html        |  9 +++++++++
 .../file-input-preview.component.html           |  9 +++++++++
 .../dxc-file-input.component.html               |  4 ++--
 .../dxc-file-input.component.spec.ts            | 17 +++++++++++++++++
 .../dxc-file-input/dxc-file-input.component.ts  | 16 ++++++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html
index 0509e523f..555d2f0ab 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html
@@ -43,6 +43,15 @@
     <td></td>
     <td>Helper text to be placed above the component.</td>
   </tr>
+  <tr>
+    <td>buttonLabel: string</td>
+    <td>
+      <code></code>
+    </td>
+    <td>
+      Text to be placed inside the button.
+    </td>
+  </tr>
   <tr>
     <td>accept: string</td>
     <td></td>
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/file-input-preview/file-input-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/file-input-preview/file-input-preview.component.html
index e3e5b2c20..8e9418c5c 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/file-input-preview/file-input-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/file-input-preview/file-input-preview.component.html
@@ -9,6 +9,15 @@
       (callbackFile)="callback($event)"
       [multiple]="false"
     ></dxc-file-input>
+    <dxc-file-input
+      label="Custom button label"
+      helperText="helperText"
+      buttonLabel="Custom button label"
+      [showPreview]="true"
+      margin="xsmall"
+      (callbackFile)="callback2($event)"
+      [multiple]="false"
+    ></dxc-file-input>
     <dxc-file-input
       label="Label"
       helperText="helperText"
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html
index fcc5db2cd..2eb2c266d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html
@@ -10,7 +10,7 @@
   />
   <dxc-button
     *ngIf="mode === 'file'"
-    label="Select files"
+    [label]="buttonLabel"
     mode="secondary"
     [disabled]="disabled"
     (onClick)="fileInput.click()"
@@ -27,7 +27,7 @@
     (dragover)="dragOver($event)"
   >
     <dxc-button
-      label="Select"
+      [label]="buttonLabel"
       mode="secondary"
       [disabled]="disabled"
       [tabIndexValue]="tabIndexValue"
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.spec.ts
index 5dd43c821..7fcb7ed87 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.spec.ts
@@ -30,6 +30,23 @@ describe("DxcFileInputComponent", () => {
     expect(fileInput.getByText("Helper Text"));
   });
 
+  test("should render dxc-file-input with custom buttonLabel", async () => {
+    const fileInput = await render(DxcFileInputComponent, {
+      componentProperties: {
+        label: "Label",
+        helperText: "Helper Text",
+        buttonLabel: "Custom Button Label",
+      },
+      excludeComponentDeclaration: true,
+      imports: [DxcFileInputModule],
+    });
+
+    expect(fileInput.getByText("Custom Button Label"));
+    expect(fileInput.getByText("Label"));
+    expect(fileInput.getByText("Helper Text"));
+  });
+
+
   test("should render dxc-file-input in file drop mode", async () => {
     const fileInput = await render(DxcFileInputComponent, {
       componentProperties: {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
index adb64c658..446d8862f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
@@ -49,6 +49,7 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
   @Input() public name: string;
   @Input() public mode: string = "file";
   @Input() public label: string;
+  @Input() public buttonLabel: string;
   @Input() public helperText: string;
   @Input() public value: Array<FileData>;
   @Input() public accept: any;
@@ -148,6 +149,21 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
     this.hasShowError = this.isErrorShow();
     this.hasMultipleFiles = this.isMultipleFilesPrintables();
     this.hasSingleFile = this.isSingleFilesPrintables();
+    if (!this.buttonLabel) {
+      console.log(
+        this.mode === "file"
+          ? this.multiple
+            ? "Select files"
+            : "Select file"
+          : "Select"
+      );
+      this.buttonLabel =
+        this.mode === "file"
+          ? this.multiple
+            ? "Select files"
+            : "Select file"
+          : "Select";
+    }
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }