browser/apps/web/src/app/core/modal.service.ts

import { Injectable, Injector } from "@angular/core";
import * as jq from "jquery";
import { first } from "rxjs/operators";

import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
import { ModalService as BaseModalService } from "@bitwarden/angular/services/modal.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";

@Injectable()
export class ModalService extends BaseModalService {
  el: any = null;
  modalOpen = false;

  constructor(
    injector: Injector,
    private messagingService: MessagingService,
  ) {
    super(injector);
  }

  protected setupHandlers(modalRef: ModalRef) {
    modalRef.onCreated.pipe(first()).subscribe(() => {
      const modals = Array.from(document.querySelectorAll(".modal"));
      if (modals.length > 0) {
        this.el = jq(modals[0]);
        this.el.modal("show");

        this.el.on("show.bs.modal", () => {
          modalRef.show();
          this.messagingService.send("modalShow");
        });
        this.el.on("shown.bs.modal", () => {
          modalRef.shown();
          this.messagingService.send("modalShown");
          if (!Utils.isMobileBrowser) {
            this.el.find("*[appAutoFocus]").focus();
          }
        });
        this.el.on("hide.bs.modal", () => {
          this.messagingService.send("modalClose");
        });
        this.el.on("hidden.bs.modal", () => {
          modalRef.closed();
          this.messagingService.send("modalClosed");
        });
      }
    });

    modalRef.onClose.pipe(first()).subscribe(() => {
      if (this.el != null) {
        this.el.modal("hide");
      }
    });
  }
}