mina-sidor-fa-web/libs/ui/src/dialog/ui-dialog.service.ts

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