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

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;
+  }
+}