feature(Nya deltagare): Använd nya dialogen (TV-845)

Merge in TEA/mina-sidor-fa-web from feature(Nya-deltagare)-Använd-nya-dialogen-(TV-845) to develop

Squashed commit of the following:

commit cdc3acefcdd6e209e8009fb767ae375a0db2935a
Merge: f9354d04 1de76242
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Dec 28 14:26:35 2021 +0100

    Merge branch 'develop' into feature(Nya-deltagare)-Använd-nya-dialogen-(TV-845)

commit f9354d04f51425cce29f13a10b32555113edaaa2
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Dec 28 09:16:54 2021 +0100

    feature(Nya deltagare): Använd nya dialogen (TV-845)

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html

@@ -85,16 +85,8 @@
                   Läs mer information här
                 </digi-button>
 
-                <digi-ng-dialog
-                  class="avrop-dialog"
-                  [afActive]="displayAvropDialog$ | async"
-                  (afOnInactive)="closeAvropDialog()"
-                  (afOnPrimaryClick)="closeAvropDialog()"
-                  afHeading="Information"
-                  afHeadingLevel="h2"
-                  afPrimaryButtonText="Stäng"
-                  afSecondaryButtonText=""
-                >
+                <ng-template #informationDialog>
+                  <h2>Information</h2>
                   <h3>Genomförandereferens</h3>
                   <p>
                     Genomförandereferens är det referensnummer du ska använda dig av i kontakten med Arbetsförmedlingen.
@@ -117,7 +109,7 @@
                     språkstöd som ingår i upphandlingen av olika tjänster och utbildningar. Du hittar mer information om
                     språkstöd och tolk i förfrågningsunderlaget för specifik upphandling.
                   </p>
-                </digi-ng-dialog>
+                </ng-template>
               </div>
               <msfa-avrop-list
                 [availableAvrop]="avropData.data"

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
 import { Avrop, AvropAndMeta } from '@msfa-models/avrop.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { AvropService } from '@msfa-services/avrop.service';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
+import { UiDialog } from '@ui/dialog/ui-dialog.service';
 
 @Component({
   selector: 'msfa-avrop',
@@ -11,6 +12,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvropComponent implements OnDestroy {
+  @ViewChild('informationDialog') informationDialog: TemplateRef<unknown>;
   readonly totalAmountOfSteps = 3;
   currentStep$: Observable<number> = this.avropService.currentStep$;
   error$: Observable<string> = this.avropService.error$;
@@ -23,9 +25,8 @@ export class AvropComponent implements OnDestroy {
   avropIsSubmitted$: Observable<boolean> = this.avropService.avropIsSubmitted$;
   avropLoading$: Observable<boolean> = this.avropService.avropLoading$;
   showUnauthorizedError$: Observable<boolean> = this.avropService.showUnauthorizedError$;
-  displayAvropDialog$ = new BehaviorSubject(false);
 
-  constructor(private avropService: AvropService) {}
+  constructor(private avropService: AvropService, private uiDialog: UiDialog) {}
 
   ngOnDestroy(): void {
     this.returnToStep1();
@@ -76,10 +77,6 @@ export class AvropComponent implements OnDestroy {
   }
 
   openAvropDialog(): void {
-    this.displayAvropDialog$.next(true);
-  }
-
-  closeAvropDialog(): void {
-    this.displayAvropDialog$.next(false);
+    this.uiDialog.open(this.informationDialog);
   }
 }