Added multiple ids needed for tests

src/lib/buttons/circle-button/circle-button.component.html

@@ -8,6 +8,7 @@
         [class.grey-selected]="greySelected"
         [disabled]="disabled"
         [type]="isSubmit ? 'submit' : 'button'"
+        [id]="id ? id : buttonId"
         mat-icon-button
     >
         <mat-icon [svgIcon]="icon"></mat-icon>

src/lib/buttons/circle-button/circle-button.component.ts

@@ -12,6 +12,7 @@ import { IqserTooltipPosition, IqserTooltipPositions } from '../../utils';
 export class CircleButtonComponent implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
 
+    @Input() id!: string;
     @Input() icon!: string;
     @Input() tooltip?: string;
     @Input() tooltipClass?: string;
@@ -49,4 +50,8 @@ export class CircleButtonComponent implements OnInit {
             this.action.emit($event);
         }
     }
+
+    get buttonId (): String {
+        return `${Math.random().toString(36).substring(2, 9)}-button`;
+    }
 }

src/lib/buttons/icon-button/icon-button.component.html

@@ -7,6 +7,7 @@
     [disabled]="disabled"
     mat-button
     type="button"
+    [id]="id ? id : buttonId"
 >
     <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
     <span>{{ label }}</span>

src/lib/buttons/icon-button/icon-button.component.ts

@@ -12,9 +12,14 @@ export class IconButtonComponent {
     readonly iconButtonTypes = IconButtonTypes;
 
     @Input() @Required() label!: string;
+    @Input() id!: string;
     @Input() icon?: string;
     @Input() showDot = false;
     @Input() disabled = false;
     @Input() type: IconButtonType = IconButtonTypes.default;
     @Output() readonly action = new EventEmitter<MouseEvent>();
+
+    get buttonId (): String {
+        return `${Math.random().toString(36).substring(2, 9)}-button`;
+    }
 }

src/lib/listing/page-header/models/base-config.model.ts

@@ -1,4 +1,5 @@
 export interface BaseHeaderConfig {
+    readonly id?: string;
     readonly label: string;
     readonly icon?: string;
     readonly hide?: boolean;

src/lib/listing/page-header/page-header.component.html

@@ -53,6 +53,7 @@
                     [icon]="config.icon"
                     [iqserHelpMode]="config.helpModeKey"
                     [tooltip]="config.label"
+                    [id]="config.id"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>

src/lib/misc/confirmation-dialog/confirmation-dialog.component.html

@@ -16,7 +16,7 @@
 
         <div *ngIf="config.requireInput" class="iqser-input-group required w-300 mt-24">
             <label>{{ inputLabel }}</label>
-            <input [(ngModel)]="inputValue" />
+            <input [(ngModel)]="inputValue" id="requiredConfirmInput"/>
         </div>
 
         <div *ngIf="config.checkboxes.length > 0" class="mt-24 checkboxes-wrapper">
@@ -35,6 +35,7 @@
             [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
             color="primary"
             mat-flat-button
+            id="confirm"
         >
             {{ config.confirmationText }}
         </button>