refactor(popup): migrate to lit.js

public/components/package/pannels/overview/overview.js

@@ -4,6 +4,7 @@ import prettyBytes from "pretty-bytes";
 // Import Internal Dependencies
 import * as utils from "../../../../common/utils.js";
 import { PopupMaintainer } from "../../../views/home/maintainers/maintainers.js";
+import { EVENTS } from "../../../../core/events.js";
 
 // CONSTANTS
 const kEnGBDateFormat = Intl.DateTimeFormat("en-GB", {
@@ -235,9 +236,11 @@ export class Overview {
         divElement.addEventListener("click", () => {
           const [name, data] = result;
 
-          window.popup.open(
-            new PopupMaintainer(name, data, this.package.nsn).render()
-          );
+          window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
+            detail: {
+              content: new PopupMaintainer(name, data, this.package.nsn).render()
+            }
+          }));
         });
         divElement.classList.add("clickable");
       }

public/components/popup/popup.html

@@ -1,3 +1 @@
-<section id="popup--background">
-  <div class="popup"></div>
-</section>
+<nsecure-popup></nsecure-popup>

public/components/popup/popup.js

@@ -1,82 +1,125 @@
+// Import Third-party Dependencies
+import { html, LitElement, css } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
 // Import Internal Dependencies
-import * as utils from "../../common/utils";
+import { EVENTS } from "../../core/events";
+
+class Popup extends LitElement {
+  static styles = css`
+
+:host{
+  z-index: 50;
+}
+
+/** TODO: ANIMATE ? **/
+section#popup--background {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+
+  /* pointer-events: none; */
+  background: radial-gradient(ellipse at center, rgb(255 255 255 / 0%) 0%, rgb(30 35 65) 100%);
+}
+
+.show {
+  visibility: visible;
+  opacity: 1 ;
+  transition: opacity 0.35s ease-in, visibility 0ms ease-in 0ms ;
+}
+
+.hidden{
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.35s ease-in, visibility 0ms ease-in 0.35s;
+}
+
+section#popup--background>.popup {
+  pointer-events: all !important;
+  background: #f5f4f4;
+  border-radius: 4px;
+  box-shadow: 5px 5px 15px rgb(23 27 129 / 41%);
+  border-left: 2px solid #fff;
+  border-top: 2px solid #FFF;
+}
 
-export class Popup {
+ .dark >.popup {
+  background: #303263 !important;
+  box-shadow: 5px 5px 15px var(--dark-theme-primary-color) !important;
+  border-left: 2px solid var(--dark-theme-secondary-darker) !important;
+  border-top: 2px solid var(--dark-theme-secondary-darker) !important;
+}
+`;
+
+  static properties = {
+    isOpen: { type: Boolean },
+    theme: { type: String }
+  };
   constructor() {
-    this.state = "closed";
-    this.dom = {
-      background: document.getElementById("popup--background"),
-      popup: document.querySelector(".popup")
+    super();
+    this.isOpen = false;
+
+    this.open = ({ detail: { content } }) => {
+      if (this.isOpen) {
+        return;
+      }
+      // FIXME: temporary fix until all the popups content are migrated
+      if (this.theme === "dark" && content.firstElementChild) {
+        content.firstElementChild.classList.add("popup-dark");
+      }
+      this.appendChild(content);
+      this.isOpen = true;
     };
 
-    this.listener = null;
-    this.templateName = null;
-  }
+    this.close = () => {
+      if (!this.isOpen) {
+        return;
+      }
+      this.replaceChildren();
+      this.isOpen = false;
+    };
 
-  /**
-   * @param {!PopupTemplate} htmlElement
-   * @returns {void}
-   */
-  open(template) {
-    if (!(template instanceof PopupTemplate)) {
-      throw new Error("You must provide a PopupTemplate");
-    }
-    if (this.state === "open") {
-      return;
-    }
-
-    this.templateName = template.name;
-    this.dom.popup.appendChild(template.HTMLElement);
-    // TODO: apply additional css customization
-
-    this.dom.background.classList.add("show");
-    this.state = "open";
-    setTimeout(() => this.#closeOnClickOutside(), 1);
+    this.settingsChanged = ({ detail: { theme } }) => {
+      if (theme !== this.theme) {
+        this.theme = theme;
+      }
+    };
   }
 
-  #closeOnClickOutside() {
-    this.listener = utils.hideOnClickOutside(
-      this.dom.popup,
-      {
-        reverse: true,
-        hiddenTarget: null,
-        callback: () => {
-          this.listener = null;
-          this.close();
-        }
-      }
-    );
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener(EVENTS.MODAL_OPENED, this.open);
+    window.addEventListener(EVENTS.MODAL_CLOSED, this.close);
+    window.addEventListener(EVENTS.SETTINGS_SAVED, this.settingsChanged);
   }
 
-  #cleanupClickOutside() {
-    if (this.listener !== null) {
-      document.removeEventListener("click", this.listener);
-    }
+  disconnectedCallback() {
+    window.removeEventListener(EVENTS.MODAL_OPENED, this.open);
+    window.removeEventListener(EVENTS.MODAL_CLOSED, this.close);
+    window.removeEventListener(EVENTS.SETTINGS_SAVED, this.settingsChanged);
+    super.disconnectedCallback();
   }
 
-  close() {
-    if (this.state === "closed") {
-      return;
-    }
+  render() {
+    const classes = { hidden: !this.isOpen, show: this.isOpen, dark: this.theme === "dark" };
 
-    this.dom.popup.innerHTML = "";
-    this.templateName = null;
-    this.#cleanupClickOutside();
-    this.dom.background.classList.remove("show");
-    this.state = "closed";
+    return html`
+      <section class=${classMap(classes)} @click=${this.close} id="popup--background">
+        <div class="popup" part="popup-container" @click=${(e) => {
+          e.stopPropagation();
+        }}>
+          <slot></slot>
+        </div>
+      </section>
+`;
   }
 }
 
-export class PopupTemplate {
-  /**
-   * @param {!string} name
-   * @param {!HTMLElement} HTMLElement
-   */
-  constructor(
-    name,
-    HTMLElement
-  ) {
-    this.name = name;
-    this.HTMLElement = HTMLElement;
-  }
-}
+customElements.define("nsecure-popup", Popup);

public/components/views/home/home.js

@@ -7,6 +7,7 @@ import { getScoreColor, getVCSRepositoryPathAndPlatform } from "@nodesecure/util
 import * as utils from "../../../common/utils.js";
 import "../../gauge/gauge.js";
 import "../../expandable/expandable.js";
+import { EVENTS } from "../../../core/events.js";
 import { fetchScorecardData, getScorecardLink } from "../../../common/scorecard.js";
 
 // Import Components
@@ -389,9 +390,11 @@ export class HomeView {
 
   handleReport() {
     document.querySelector(".home--header--report").addEventListener("click", async() => {
-      window.popup.open(
-        new PopupReport(this.secureDataSet.data.rootDependencyName).render()
-      );
+      window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
+        detail: {
+          content: new PopupReport(this.secureDataSet.data.rootDependencyName).render()
+        }
+      }));
     });
   }
 }

public/components/views/home/maintainers/maintainers.css

@@ -86,6 +86,7 @@ body.dark .home--maintainers > .highlighted {
 
 /**
  * POPUP
+ * FIXME: remove the !important when the popup is migrated to lit
  **/
 .maintainers--popup {
   display: flex;
@@ -130,8 +131,8 @@ body.dark .home--maintainers > .highlighted {
   color: #546884;
 }
 
-body.dark .maintainers--popup>.header>.informations>p.name {
-  color: white;
+.popup-dark >.header>.informations>p.name {
+  color: white !important;
 }
 
 .maintainers--popup>.header>.informations>p.email {
@@ -140,9 +141,9 @@ body.dark .maintainers--popup>.header>.informations>p.name {
   font-family: monospace;
 }
 
-body.dark .maintainers--popup>.header>.informations>p.email {
-  color: var(--dark-theme-secondary-color);
-  opacity: 0.9;
+.popup-dark >.header>.informations>p.email {
+  color: var(--dark-theme-secondary-color) !important;
+  opacity: 0.9 !important;
 }
 
 .maintainers--popup>.header>.icons {
@@ -182,8 +183,8 @@ body.dark .maintainers--popup>.header>.informations>p.email {
   flex-shrink: 0;
 }
 
-body.dark .maintainers--popup>.separator {
-  background: var(--dark-theme-secondary-color);
+.popup-dark >.separator {
+  background: var(--dark-theme-secondary-color) !important;
 }
 
 .maintainers--popup>.separator>p {
@@ -195,9 +196,9 @@ body.dark .maintainers--popup>.separator {
   color: #255471;
 }
 
-body.dark .maintainers--popup>.separator>p {
-  background: #303263;
-  color: #3cbde5;
+.popup-dark>.separator>p {
+  background: #303263 !important;
+  color: #3cbde5 !important;
 }
 
 .maintainers--popup>ul {
@@ -224,27 +225,27 @@ body.dark .maintainers--popup>.separator>p {
   font-size: 15px;
 }
 
-body.dark .maintainers--popup>ul li {
-  background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgb(28 29 58 / 18.5%) 100%);
-  border: none;
-  color: white;
+.popup-dark>ul li {
+  background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgb(28 29 58 / 18.5%) 100%) !important;
+  border: none !important;
+  color: white !important;
 }
 
 .maintainers--popup>ul li>p{
   color: #234c99;
 }
 
-body.dark .maintainers--popup>ul li>p{
-  color: #9ca6b7;
+.popup-dark>ul li>p{
+  color: #9ca6b7 !important;
 }
 
 .maintainers--popup>ul li>span{
   color: #2470b3;
   margin-left: 10px;
 }
 
-body.dark .maintainers--popup>ul li>span{
-  color: var(--dark-theme-secondary-color);
+.popup-dark>ul li>span{
+  color: var(--dark-theme-secondary-color) !important;
 }
 
 .maintainers--popup>ul li>i{