From 1fda6967b1002a7110a117d376d0d5f3793c7598 Mon Sep 17 00:00:00 2001
From: George <george.balanesc@gmail.com>
Date: Wed, 1 Mar 2023 15:15:34 +0200
Subject: [PATCH] RED-6154, add ids to file upload input, radio detail groups
 and empty state button.

---
 .../empty-state/empty-state.component.html             |  1 +
 .../empty-states/empty-state/empty-state.component.ts  |  2 ++
 src/lib/inputs/details-radio/details-radio-option.ts   |  1 +
 .../inputs/details-radio/details-radio.component.html  |  1 +
 .../inputs/details-radio/details-radio.component.ts    |  4 ++++
 src/lib/upload-file/upload-file.component.html         | 10 +++++++++-
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/empty-states/empty-state/empty-state.component.html b/src/lib/empty-states/empty-state/empty-state.component.html
index 82397d5..ddce9a2 100644
--- a/src/lib/empty-states/empty-state/empty-state.component.html
+++ b/src/lib/empty-states/empty-state/empty-state.component.html
@@ -12,6 +12,7 @@
     </div>
     <div class="heading-l" [innerHTML]="text"></div>
     <iqser-icon-button
+        [buttonId]="buttonId"
         (action)="action.emit()"
         *ngIf="showButton"
         [icon]="buttonIcon"
diff --git a/src/lib/empty-states/empty-state/empty-state.component.ts b/src/lib/empty-states/empty-state/empty-state.component.ts
index 658b1ed..a97ac1d 100644
--- a/src/lib/empty-states/empty-state/empty-state.component.ts
+++ b/src/lib/empty-states/empty-state/empty-state.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { IconButtonTypes } from '../../buttons';
+import { randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-empty-state [text]',
@@ -15,6 +16,7 @@ export class EmptyStateComponent implements OnInit {
     @Input() showButton = true;
     @Input() buttonIcon = 'iqser:plus';
     @Input() buttonLabel?: string;
+    @Input() buttonId = `${randomString()}-icon-button`;
     @Input() horizontalPadding = 100;
     @Input() verticalPadding = 120;
     @Input() helpModeKey?: string;
diff --git a/src/lib/inputs/details-radio/details-radio-option.ts b/src/lib/inputs/details-radio/details-radio-option.ts
index 15162b3..b372705 100644
--- a/src/lib/inputs/details-radio/details-radio-option.ts
+++ b/src/lib/inputs/details-radio/details-radio-option.ts
@@ -1,4 +1,5 @@
 export interface DetailsRadioOption<I> {
+    id?: string;
     label: string;
     description: string;
     value: I;
diff --git a/src/lib/inputs/details-radio/details-radio.component.html b/src/lib/inputs/details-radio/details-radio.component.html
index 15d7914..a897e1f 100644
--- a/src/lib/inputs/details-radio/details-radio.component.html
+++ b/src/lib/inputs/details-radio/details-radio.component.html
@@ -1,5 +1,6 @@
 <div class="iqser-input-group" [class.row]="displayInRow">
     <div
+        [id]="groupId(option)"
         (click)="toggleOption(option)"
         *ngFor="let option of options"
         [class.active]="option.value === value?.value"
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index b5738dd..8284ef5 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -30,4 +30,8 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
         this._value = currentlyChecked ? undefined : option;
         this.onChange(this._value);
     }
+
+    groupId(option: DetailsRadioOption<I>) {
+        return (option.id ?? option.label.replace('.', '-')) + '-checkbox-details-input';
+    }
 }
diff --git a/src/lib/upload-file/upload-file.component.html b/src/lib/upload-file/upload-file.component.html
index 31a4ab2..4dd42fb 100644
--- a/src/lib/upload-file/upload-file.component.html
+++ b/src/lib/upload-file/upload-file.component.html
@@ -12,5 +12,13 @@
         <mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
     </div>
 
-    <input #attachFileInput (change)="attachFile($event)" [accept]="accept" [hidden]="true" class="file-upload-input" type="file" />
+    <input
+        #attachFileInput
+        id="file-upload-input"
+        (change)="attachFile($event)"
+        [accept]="accept"
+        [hidden]="true"
+        class="file-upload-input"
+        type="file"
+    />
 </div>