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
+                <ng-template #informationDialog>
-                  class="avrop-dialog"
+                  <h2>Information</h2>
-                  [afActive]="displayAvropDialog$ | async"
-                  (afOnInactive)="closeAvropDialog()"
-                  (afOnPrimaryClick)="closeAvropDialog()"
-                  afHeading="Information"
-                  afHeadingLevel="h2"
-                  afPrimaryButtonText="Stäng"
-                  afSecondaryButtonText=""
-                >
                   <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);
+    this.uiDialog.open(this.informationDialog);
-  }
-
-  closeAvropDialog(): void {
-    this.displayAvropDialog$.next(false);
   }
 }

libs/ui/src/dialog/ui-dialog.model.ts

@@ -4,6 +4,10 @@ export const UI_DIALOG_DATA = 'UI_DIALOG_DATA';
 
 export interface UiDialogConfig<DialogInputData = unknown> {
   data?: DialogInputData;
+  minWidth?: string;
+  maxWidth?: string;
+  minHeight?: string;
+  maxHeight?: string;
 
   /**
    * primaryButtonText defaults to 'Stäng'

libs/ui/src/dialog/ui-dialog.service.ts

@@ -5,7 +5,7 @@ import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
 import { UiDialogComponent } from './ui-dialog.component';
 import { UI_DIALOG_DATA, UiDialogConfig } from '@ui/dialog/ui-dialog.model';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class UiDialog {
   constructor(private overlay: Overlay, private injector: Injector) {}
 
@@ -26,8 +26,10 @@ export class UiDialog {
     const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
     const configs = new OverlayConfig({
       positionStrategy,
-      minWidth: '40rem',
+      minWidth: config.minWidth ?? '40rem',
-      minHeight: '40rem',
+      minHeight: config.minHeight ?? '40rem',
+      maxWidth: config.maxWidth ?? '60rem',
+      maxHeight: config.maxHeight ?? '60rem',
       hasBackdrop: true,
       scrollStrategy: this.overlay.scrollStrategies.close(),
       backdropClass: 'cdk-overlay-dark-backdrop',