RED-5875: Remove mat-flat-button usages

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

@@ -1,15 +1,10 @@
 <button
     (click)="!disabled && action.emit($event)"
-    [class.has-icon]="!!icon"
-    [class.overlay]="showDot"
-    [class.primary]="type === iconButtonTypes.primary"
-    [class.show-bg]="type === iconButtonTypes.dark"
-    [class.help]="type === iconButtonTypes.help"
-    [class.bold-text]="boldText"
     [disabled]="disabled"
-    mat-button
-    type="button"
     [id]="id ? id : buttonId"
+    [ngClass]="classes"
+    [type]="submit ? 'submit' : 'button'"
+    mat-button
 >
     <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
     <span>{{ label }}</span>

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

@@ -6,7 +6,7 @@ button {
         padding: 0 14px 0 10px;
     }
 
-    &.show-bg {
+    &.dark {
         background-color: var(--iqser-btn-bg);
 
         &:not(.mat-button-disabled):hover {
@@ -14,12 +14,6 @@ button {
         }
     }
 
-    &.bold-text {
-        span {
-            font-weight: bold;
-        }
-    }
-
     mat-icon {
         width: 14px;
     }

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

@@ -9,17 +9,26 @@ import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 })
 export class IconButtonComponent {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly buttonId: string;
 
     @Input() label!: string;
     @Input() id?: string;
     @Input() icon?: string;
     @Input() showDot = false;
     @Input() disabled = false;
-    @Input() boldText = false;
+    @Input() submit = false;
     @Input() type: IconButtonType = IconButtonTypes.default;
     @Output() readonly action = new EventEmitter<MouseEvent>();
 
-    get buttonId(): string {
-        return `${Math.random().toString(36).substring(2, 9)}-button`;
+    constructor() {
+        this.buttonId = `${Math.random().toString(36).substring(2, 9)}-button`;
+    }
+
+    get classes(): Record<string, boolean> {
+        return {
+            overlay: this.showDot,
+            [this.type]: true,
+            'has-icon': !!this.icon,
+        };
     }
 }

src/lib/dialog/base-dialog.component.ts

@@ -1,12 +1,13 @@
-import { Directive, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
+import { Directive, HostListener, inject, OnDestroy } from '@angular/core';
 import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { hasFormChanged, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '.';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
-import { firstValueFrom, Subscription } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { LoadingService } from '../loading';
 import { Toaster } from '../services';
+import { IconButtonTypes } from '../buttons';
 
 const TARGET_NODE = 'mat-dialog-container';
 
@@ -16,18 +17,9 @@ export interface SaveOptions {
 }
 
 @Directive()
-/**
- * Extend this component when you want to submit the form after pressing enter.
- *
- * This could be done by adding properties (submit)="save()" on the form and type="submit" on the save button.
- * However, some components (e.g. redaction-select, color picker) don't set focus on the input after choosing a value.
- * Also, other components (e.g. dropdown select) trigger a different action on enter, instead of submit.
- *
- * Make sure to remove the (submit)="save()" property from the form and to set type="button" on the save button
- * (otherwise the save request will be triggered twice).
- * */
 export abstract class BaseDialogComponent implements OnDestroy {
-    form!: UntypedFormGroup;
+    readonly iconButtonTypes = IconButtonTypes;
+    form?: UntypedFormGroup;
     initialFormValue!: Record<string, string>;
     protected readonly _formBuilder = inject(UntypedFormBuilder);
     protected readonly _loadingService = inject(LoadingService);
@@ -41,11 +33,11 @@ export abstract class BaseDialogComponent implements OnDestroy {
     protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {}
 
     get valid(): boolean {
-        return this.form.valid;
+        return !this.form || this.form.valid;
     }
 
     get changed(): boolean {
-        return hasFormChanged(this.form, this.initialFormValue);
+        return !this.form || hasFormChanged(this.form, this.initialFormValue);
     }
 
     get disabled(): boolean {

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

@@ -30,26 +30,23 @@
     </div>
 
     <div class="dialog-actions">
-        <button
-            (click)="confirm(confirmOption)"
+        <iqser-icon-button
+            (action)="confirm(confirmOption)"
             [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
-            color="primary"
+            [label]="config.confirmationText"
+            [type]="iconButtonTypes.primary"
             id="confirm"
-            mat-flat-button
         >
-            {{ config.confirmationText }}
-        </button>
+        </iqser-icon-button>
 
-        <button
+        <iqser-icon-button
             (click)="confirm(ConfirmOptions.SECOND_CONFIRM)"
             *ngIf="config.alternativeConfirmationText"
             [disabled]="config.requireInput && confirmationDoesNotMatch()"
-            [ngClass]="{ 'all-caps-label cancel': true }"
-            color="primary"
-            mat-flat-button
+            [label]="config.alternativeConfirmationText"
+            [type]="iconButtonTypes.primary"
         >
-            {{ config.alternativeConfirmationText }}
-        </button>
+        </iqser-icon-button>
 
         <div (click)="confirm(ConfirmOptions.DISCARD_CHANGES)" *ngIf="config.discardChangesText" class="all-caps-label cancel">
             {{ config.discardChangesText }}

src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef }
 import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IconButtonTypes } from '../../buttons';
 
 export type TitleColor = 'default' | 'warn';
 
@@ -85,6 +86,7 @@ export class ConfirmationDialogComponent {
     showToast = false;
     readonly inputLabel: string;
     readonly ConfirmOptions = ConfirmOptions;
+    readonly iconButtonTypes = IconButtonTypes;
 
     constructor(
         private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent>,
@@ -104,6 +106,13 @@ export class ConfirmationDialogComponent {
         return this.config?.titleColor === TitleColors.WARN;
     }
 
+    get confirmOption(): ConfirmOptions {
+        if (!this.config.checkboxesValidation && this.config.checkboxes[0]?.value) {
+            return ConfirmOptions.SECOND_CONFIRM;
+        }
+        return ConfirmOptions.CONFIRM;
+    }
+
     @HostListener('window:keyup.enter')
     onKeyupEnter(): void {
         if (this.config.requireInput && !this.confirmationDoesNotMatch()) {
@@ -146,11 +155,4 @@ export class ConfirmationDialogComponent {
                 });
             });
     }
-
-    get confirmOption(): ConfirmOptions {
-        if (!this.config.checkboxesValidation && this.config.checkboxes[0]?.value) {
-            return ConfirmOptions.SECOND_CONFIRM;
-        }
-        return ConfirmOptions.CONFIRM;
-    }
 }

src/lib/form/base-form.component.ts

@@ -1,9 +1,11 @@
 import { Directive } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { hasFormChanged } from '../utils';
+import { IconButtonTypes } from '../buttons';
 
 @Directive()
 export abstract class BaseFormComponent {
+    readonly iconButtonTypes = IconButtonTypes;
     form!: UntypedFormGroup;
     initialFormValue!: Record<string, string | number | boolean>;