Pull request #293: Feature/TV-845 ui dialog

Merge in TEA/mina-sidor-fa-web from feature/TV-845-ui-dialog-2 to develop

Squashed commit of the following:

commit 06ee26ccbe9d2fd5edfd12d7a292f42e3b747fb7
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Dec 16 09:45:23 2021 +0100

    refactor

commit e2295202721b58fbd37341d3e02dae5a95cbb0c5
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 14:03:37 2021 +0100

    Update ui-dialog-ref.ts

commit c9507cd4579b4e542d0116f5e96b3a911c51600d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 13:00:05 2021 +0100

    cleanup

commit 0e4ded553352414b5ca670897a51f127a5a289b1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:48:25 2021 +0100

    cleanup

commit 0a48220c8bcd5704f7436f1c0c84ca25bac4c8e8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:36:16 2021 +0100

    Dialog working

commit c4c1e9fb42d99df7ec6c058b7bea30662a03bb33
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 11:14:36 2021 +0100

    wip

commit 6668dfb154022b873b0a042087181cd0e6f8994d
Merge: 624b9439 9d96f0d9
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:27 2021 +0100

    Merge branch 'develop' into feature/TV-845-ui-dialog-2

commit 624b94399689bef07178f89c015745c90af1b288
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:19 2021 +0100

    wip

commit 0478638ab0d0f8f62ce8d10489f20e4930099936
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:58:49 2021 +0100

    wip

commit 12234c22062124165c2da10ff75cc887997172a8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:21:09 2021 +0100

    wip

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html

@@ -1,87 +1,77 @@
-<digi-ng-dialog
-  *ngIf="deltagare"
-  [afActive]="deltagare"
-  (afOnPrimaryClick)="emitCloseDialog()"
-  (afOnSecondaryClick)="closeMotivation()"
-  (afOnInactive)="emitCloseDialog()"
-  [afHeading]="heading"
-  afHeadingLevel="h2"
-  afPrimaryButtonText="Stäng"
-  [afSecondaryButtonText]="activeHandelseMotivation ? 'Tillbaka till alla händelser' : null"
->
-  <div class="deltagare-list-handelser">
-    <h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
-    <p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
-    <ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
-      <ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
-        <p>{{activeHandelseMotivation.motivation}}</p>
-      </ng-container>
+<h2>Händelser för {{deltagare.fullName}}</h2>
 
-      <ng-template #handelseTableRef>
-        <digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
-          <table>
-            <caption class="msfa__a11y-sr-only">
-              Lista med alla händelser för {{deltagare.fullName}}
-            </caption>
-            <thead>
-              <tr>
-                <th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
-                <th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
-                <th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
-                <th scope="col" class="deltagare-list-handelser__heading-row">Motivering</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let handelse of deltagareHandelserData.data;">
-                <td class="deltagare-list-handelser__table-cell">
-                  <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
-                </td>
-                <td
-                  class="deltagare-list-handelser__table-cell"
-                  [ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
-                >
-                  <ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
-                  {{handelse.description}}
-                </td>
-                <td class="deltagare-list-handelser__table-cell">
-                  <ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
-                    {{handelse.effectDescription}}:
-                    <digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
-                  </ng-container>
-                </td>
-                <td class="deltagare-list-handelser__table-cell">
-                  <digi-button
-                    *ngIf="handelse.motivation"
-                    af-variation="tertiary"
-                    af-size="s"
-                    (click)="openMotivation(handelse)"
-                  >
-                    <ui-icon slot="icon" uiType="info"></ui-icon>
-                    Motivering till beslut
-                  </digi-button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </digi-table>
-        <ng-container *ngIf="deltagareHandelserData.meta as paginationMeta">
-          <digi-navigation-pagination
-            *ngIf="paginationMeta?.totalPage > 1"
-            class="deltagare-list-handelser__pagination"
-            [afTotalPages]="paginationMeta?.totalPage"
-            [afInitActivePage]="paginationMeta?.page"
-            [afCurrentResultStart]="currentResultStart(paginationMeta)"
-            [afCurrentResultEnd]="currentResultEnd(paginationMeta)"
-            [afTotalResults]="paginationMeta?.count"
-            (afOnPageChange)="setNewPage($event.detail)"
-            af-result-name="händelser"
-          >
-          </digi-navigation-pagination>
-        </ng-container>
-      </ng-template>
+<div class="deltagare-list-handelser" *ngIf="deltagare">
+  <h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
+  <p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
+  <ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
+    <ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
+      <p>{{activeHandelseMotivation.motivation}}</p>
     </ng-container>
-  </div>
-</digi-ng-dialog>
+
+    <ng-template #handelseTableRef>
+      <digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
+        <table>
+          <caption class="msfa__a11y-sr-only">
+            Lista med alla händelser för {{deltagare.fullName}}
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
+              <th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
+              <th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
+              <th scope="col" class="deltagare-list-handelser__heading-row">Motivering</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let handelse of deltagareHandelserData.data;">
+              <td class="deltagare-list-handelser__table-cell">
+                <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
+              </td>
+              <td
+                class="deltagare-list-handelser__table-cell"
+                [ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
+              >
+                <ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
+                {{handelse.description}}
+              </td>
+              <td class="deltagare-list-handelser__table-cell">
+                <ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
+                  {{handelse.effectDescription}}:
+                  <digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
+                </ng-container>
+              </td>
+              <td class="deltagare-list-handelser__table-cell">
+                <digi-button
+                  *ngIf="handelse.motivation"
+                  af-variation="tertiary"
+                  af-size="s"
+                  (click)="openMotivation(handelse)"
+                >
+                  <ui-icon slot="icon" uiType="info"></ui-icon>
+                  Motivering till beslut
+                </digi-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </digi-table>
+      <ng-container *ngIf="deltagareHandelserData.meta as paginationMeta">
+        <digi-navigation-pagination
+          *ngIf="paginationMeta?.totalPage > 1"
+          class="deltagare-list-handelser__pagination"
+          [afTotalPages]="paginationMeta?.totalPage"
+          [afInitActivePage]="paginationMeta?.page"
+          [afCurrentResultStart]="currentResultStart(paginationMeta)"
+          [afCurrentResultEnd]="currentResultEnd(paginationMeta)"
+          [afTotalResults]="paginationMeta?.count"
+          (afOnPageChange)="setNewPage($event.detail)"
+          af-result-name="händelser"
+        >
+        </digi-navigation-pagination>
+      </ng-container>
+    </ng-template>
+  </ng-container>
+</div>
 
 <ng-template #noEventsRef>
   <p>Inga händelser har inkommit.</p>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts

@@ -1,13 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, OnDestroy } from '@angular/core';
 import {
   DeltagareHandelse,
   DeltagareHandelseData,
@@ -19,6 +10,8 @@ import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.se
 import { UiIconSize } from '@ui/icon/icon-size.enum';
 import { UiIconType } from '@ui/icon/icon-type.enum';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { UI_DIALOG_DATA } from '@ui/dialog/ui-dialog.model';
+import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
 
 @Component({
   selector: 'msfa-deltagare-list-handelser-dialog',
@@ -26,27 +19,25 @@ import { BehaviorSubject, Observable } from 'rxjs';
   styleUrls: ['./deltagare-list-handelser-dialog.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DeltagareListHandelserDialogComponent implements OnChanges, OnDestroy {
-  @Input() deltagare: DeltagareCompact;
-  @Output() closeDialog = new EventEmitter<void>();
+export class DeltagareListHandelserDialogComponent implements OnDestroy {
   IconType = UiIconType;
   IconSize = UiIconSize;
   deltagareHandelserData$: Observable<DeltagareHandelseData>;
   private _activeHandelseMotivation$ = new BehaviorSubject<DeltagareHandelseMotivation>(null);
 
-  constructor(private deltagareHandelserService: DeltagareHandelserService) {}
+  constructor(
+    private deltagareHandelserService: DeltagareHandelserService,
+    @Inject(UI_DIALOG_DATA) public deltagare: DeltagareCompact,
+    private uiDialogRef: UiDialogRef
+  ) {
+    this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
+    this.deltagareHandelserData$ = this.deltagareHandelserService.deltagareHandelserData$;
+  }
 
   ngOnDestroy(): void {
     this.deltagareHandelserService.resetParams();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.deltagare && changes.deltagare.currentValue) {
-      this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
-      this.deltagareHandelserData$ = this.deltagareHandelserService.deltagareHandelserData$;
-    }
-  }
-
   get activeHandelseMotivation(): DeltagareHandelseMotivation {
     return this._activeHandelseMotivation$.getValue();
   }
@@ -89,6 +80,6 @@ export class DeltagareListHandelserDialogComponent implements OnChanges, OnDestr
 
   emitCloseDialog(): void {
     this._activeHandelseMotivation$.next(null);
-    this.closeDialog.emit();
+    this.uiDialogRef.close();
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html

@@ -84,21 +84,3 @@
   >
   </digi-navigation-pagination>
 </div>
-
-<msfa-deltagare-list-handelser-dialog
-  id="deltagare-handelser"
-  [deltagare]="handelserDialogDeltagare$ | async"
-  (closeDialog)="closeHandelser()"
-></msfa-deltagare-list-handelser-dialog>
-<!-- <digi-ng-dialog
-  *ngIf="handelserDialogDeltagare$ | async as deltagare"
-  [afActive]="handelserDialogIsOpen$ | async"
-  (afOnPrimaryClick)="closeHandelser()"
-  (afOnInactive)="closeHandelser()"
-  [afHeading]="'Händelser för ' + deltagare.fullName"
-  afHeadingLevel="h2"
-  [afPrimaryButtonText]="'Stäng'"
-  id="deltagareHandelser"
->
-  <msfa-deltagare-list-handelser-dialog [deltagare]="deltagare"></msfa-deltagare-list-handelser-dialog>
-</digi-ng-dialog> -->

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts

@@ -6,8 +6,8 @@ import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { Sort } from '@msfa-models/sort.model';
 import { UiIconSize } from '@ui/icon/icon-size.enum';
 import { UiIconType } from '@ui/icon/icon-type.enum';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
+import { UiDialog } from '@ui/dialog/ui-dialog.service';
 
 @Component({
   selector: 'msfa-deltagare-list-table',
@@ -22,9 +22,10 @@ export class DeltagareListTableComponent {
   @Input() sort: Sort<keyof DeltagareCompact>;
   @Output() sorted = new EventEmitter<keyof DeltagareCompact>();
   @Output() paginated = new EventEmitter<number>();
-  handelserDialogDeltagare$ = new BehaviorSubject<DeltagareCompact | null>(null);
 
-  handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(deltagare => !!deltagare));
+  constructor(public uiDialog: UiDialog) {}
+
+  handelserDialogComponent = DeltagareListHandelserDialogComponent;
 
   IconType = UiIconType;
   IconSize = UiIconSize;
@@ -81,6 +82,13 @@ export class DeltagareListTableComponent {
     return end < this.count ? end : this.count;
   }
 
+  openHandelser(singleDeltagare: DeltagareCompact): void {
+    this.uiDialog.open(this.handelserDialogComponent, {
+      data: singleDeltagare,
+      primaryButtonText: 'Stäng',
+    });
+  }
+
   getAvropDate(deltagare: DeltagareCompact, avropDate?: string): Date {
     return avropDate === 'startdatumAvrop' ? new Date(deltagare.startdatumAvrop) : new Date(deltagare.slutdatumAvrop);
   }
@@ -92,12 +100,4 @@ export class DeltagareListTableComponent {
   setNewPage(page: number): void {
     this.paginated.emit(page);
   }
-
-  openHandelser(deltagareCompact: DeltagareCompact): void {
-    this.handelserDialogDeltagare$.next(deltagareCompact);
-  }
-
-  closeHandelser(): void {
-    this.handelserDialogDeltagare$.next(null);
-  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -6,11 +5,12 @@ import { UiIconModule } from '@ui/icon/icon.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
 import { DeltagareListTableComponent } from './deltagare-list-table.component';
+import { UiDialogModule } from '@ui/dialog/ui-dialog.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareListTableComponent, DeltagareListHandelserDialogComponent],
-  imports: [CommonModule, RouterModule, UiIconModule, UiLoaderModule, DigiNgDialogModule],
+  imports: [CommonModule, RouterModule, UiIconModule, UiDialogModule, UiLoaderModule],
   exports: [DeltagareListTableComponent],
 })
 export class DeltagareListTableModule {}

apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { PaginationParams } from '@msfa-models/api/params.model';
-import { BehaviorSubject, combineLatest } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { DeltagareHandelserApiService } from './api/deltagare-handelser.api.service';
+import { DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
 
 const DEFAULT_PARAMS: PaginationParams = {
   page: 1,
@@ -16,7 +17,10 @@ export class DeltagareHandelserService {
   private _params$ = new BehaviorSubject<PaginationParams>(DEFAULT_PARAMS);
   private _genomforandeReferens$ = new BehaviorSubject<number>(null);
 
-  deltagareHandelserData$ = combineLatest([this._genomforandeReferens$, this._params$]).pipe(
+  deltagareHandelserData$: Observable<DeltagareHandelseData> = combineLatest([
+    this._genomforandeReferens$,
+    this._params$,
+  ]).pipe(
     switchMap(([genomforandeReferens, params]) => {
       return this.deltagareHandelserApiService.fetchDeltagareHandelser$(genomforandeReferens, params);
     })

libs/ui/.eslintrc.json

@@ -12,7 +12,7 @@
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      "parserOptions": { "project": ["apps/mina-sidor-fa/tsconfig.*?.json"] },
+      "parserOptions": { "project": ["libs/ui/tsconfig.*?.json"] },
       "rules": {
         "max-len": [
           1,

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UiDialog } from './ui-dialog.service';
+
+describe('DialogService', () => {
+  let service: UiDialog;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UiDialog);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { Subject } from 'rxjs';
+
+import { OverlayRef } from '@angular/cdk/overlay';
+
+import { TemplateRef, Type } from '@angular/core';
+import { UiDialogConfig } from '@ui/dialog/ui-dialog.model';
+
+export interface OverlayCloseEvent<R> {
+  type: 'backdropClick' | 'close';
+  data: R;
+}
+
+export class UiDialogRef<CloseResponseData = unknown, InputDataType = unknown> {
+  afterClosed$ = new Subject<OverlayCloseEvent<CloseResponseData>>();
+
+  constructor(
+    public overlay: OverlayRef,
+    public content: string | TemplateRef<unknown> | Type<unknown>,
+    public config: UiDialogConfig<InputDataType>
+  ) {
+    overlay.backdropClick().subscribe(() => this._close('backdropClick', null));
+  }
+
+  get primaryButtonText(): string {
+    return this.config.primaryButtonText;
+  }
+  get secondaryButtonText(): string {
+    return this.config.secondaryButtonText;
+  }
+
+  close(data?: CloseResponseData): void {
+    this._close('close', data);
+  }
+
+  private _close(type: 'backdropClick' | 'close', data: CloseResponseData) {
+    this.overlay.dispose();
+    this.afterClosed$.next({
+      type,
+      data,
+    });
+
+    this.afterClosed$.complete();
+  }
+
+  primaryAction(): void {
+    this.config.primaryAction ? this.config.primaryAction(this) : this.close();
+  }
+  secondaryAction(): void {
+    this.config.secondaryAction ? this.config.secondaryAction(this) : this.close();
+  }
+}

libs/ui/src/dialog/ui-dialog.component.html

@@ -0,0 +1,29 @@
+<div class="ui-dialog">
+  <ng-container [ngSwitch]="contentType">
+    <ng-container *ngSwitchCase="'string'">
+      <div class="box">
+        <div [innerHTML]="content"></div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'template'">
+      <ng-container *ngTemplateOutlet="content; context: context"></ng-container>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'component'">
+      <ng-container *ngComponentOutlet="content"></ng-container>
+    </ng-container>
+  </ng-container>
+
+  <footer class="ui-dialog__footer">
+    <digi-button af-type="button" (click)="primaryAction()">{{primaryButtonText}}</digi-button>
+    <digi-button af-type="button" af-variation="secondary" *ngIf="secondaryButtonText" (click)="secondaryAction()">
+      {{secondaryButtonText}}
+    </digi-button>
+  </footer>
+
+  <button (click)="close()" class="ui-dialog__close-button" type="button">
+    <span class="ui-dialog__close-button-text">Stäng&nbsp;</span>
+    <ui-icon [uiType]="UiIconType.X" [uiSize]="UiIconSize.L"></ui-icon>
+  </button>
+</div>

libs/ui/src/dialog/ui-dialog.component.scss

@@ -0,0 +1,32 @@
+@import 'libs/styles/src/variables/shadows';
+@import 'libs/styles/src/variables/gutters';
+
+.ui-dialog {
+  background: white;
+  border-radius: var(--digi--ui--border--radius);
+  box-shadow: $msfa__shadow;
+  padding: $digi--layout--gutter--s $digi--layout--gutter--xl $digi--layout--gutter--l;
+  position: relative;
+
+  &__close-button {
+    position: absolute;
+    top: var(--digi--layout--gutter);
+    right: var(--digi--layout--gutter--s);
+    background: transparent;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__close-button-text {
+    font-size: var(--digi--typography--font-size--s);
+  }
+
+  &__footer {
+    min-height: var(--digi--layout--gutter);
+    display: flex;
+    margin-top: $digi--layout--gutter--l;
+    gap: var(--digi--layout--gutter);
+  }
+}

libs/ui/src/dialog/ui-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UiDialogComponent } from './ui-dialog.component';
+
+describe('DialogComponent', () => {
+  let component: UiDialogComponent;
+  let fixture: ComponentFixture<UiDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UiDialogComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UiDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Component, OnInit, TemplateRef, Type } from '@angular/core';
+import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+
+@Component({
+  selector: 'ui-dialog',
+  templateUrl: './ui-dialog.component.html',
+  styleUrls: ['./ui-dialog.component.scss'],
+})
+export class UiDialogComponent implements OnInit {
+  UiIconType = UiIconType;
+  UiIconSize = UiIconSize;
+  contentType: 'template' | 'string' | 'component';
+  content: string | TemplateRef<unknown> | Type<unknown>;
+  context;
+
+  constructor(private uiDialogRef: UiDialogRef) {}
+
+  close(): void {
+    this.uiDialogRef.close(null);
+  }
+
+  get primaryButtonText(): string {
+    return this.uiDialogRef.primaryButtonText ?? 'Stäng';
+  }
+
+  get secondaryButtonText(): string {
+    return this.uiDialogRef.secondaryButtonText;
+  }
+
+  primaryAction(): void {
+    this.uiDialogRef.primaryAction();
+  }
+
+  secondaryAction(): void {
+    this.uiDialogRef.secondaryAction();
+  }
+
+  ngOnInit(): void {
+    this.content = this.uiDialogRef.content;
+    if (typeof this.content === 'string') {
+      this.contentType = 'string';
+    } else if (this.content instanceof TemplateRef) {
+      this.contentType = 'template';
+      this.context = {
+        close: this.uiDialogRef.close.bind(this.uiDialogRef) as unknown,
+      };
+    } else {
+      this.contentType = 'component';
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
+
+export const UI_DIALOG_DATA = 'UI_DIALOG_DATA';
+
+export interface UiDialogConfig<DialogInputData = unknown> {
+  data: DialogInputData;
+
+  /**
+   * primaryButtonText defaults to 'Stäng'
+   */
+  primaryButtonText?: string;
+
+  /**
+   * primaryAction defaults to closing the dialog
+   */
+  primaryAction?: (uiDialogRef?: UiDialogRef) => unknown;
+  secondaryButtonText?: string;
+
+  /**
+   * secondaryAction defaults to closing the dialog
+   */
+  secondaryAction?: (uiDialogRef?: UiDialogRef) => unknown;
+}

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

@@ -0,0 +1,13 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UiDialogComponent } from './ui-dialog.component';
+import { UiIconModule } from '@ui/icon/icon.module';
+import { UiDialog } from '@ui/dialog/ui-dialog.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [UiDialogComponent],
+  imports: [CommonModule, UiIconModule],
+  providers: [UiDialog],
+})
+export class UiDialogModule {}

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

@@ -0,0 +1,44 @@
+import { Injectable, Injector, TemplateRef, Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+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()
+export class UiDialog {
+  constructor(private overlay: Overlay, private injector: Injector) {}
+
+  private static _createInjector(uiDialogRef: UiDialogRef, injector: Injector, config: UiDialogConfig): Injector {
+    return Injector.create({
+      parent: injector,
+      providers: [
+        { provide: UiDialogRef, useValue: uiDialogRef },
+        { provide: UI_DIALOG_DATA, useValue: config.data },
+      ],
+    });
+  }
+
+  open<DialogContent = unknown, T = unknown>(
+    content: string | TemplateRef<unknown> | Type<unknown>,
+    config: UiDialogConfig<T>
+  ): UiDialogRef<DialogContent> {
+    const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
+    const configs = new OverlayConfig({
+      positionStrategy,
+      minWidth: '40rem',
+      minHeight: '40rem',
+      hasBackdrop: true,
+      scrollStrategy: this.overlay.scrollStrategies.close(),
+      backdropClass: 'cdk-overlay-dark-backdrop',
+    });
+
+    const overlayRef = this.overlay.create(configs);
+    const uiDialogRef = new UiDialogRef<DialogContent, T>(overlayRef, content, config);
+
+    const injector = UiDialog._createInjector(uiDialogRef, this.injector, config);
+    overlayRef.attach(new ComponentPortal(UiDialogComponent, null, injector));
+
+    return uiDialogRef;
+  }
+}