refactor(vulnerabilities): migrate to lit (#568)

Author: clemgbld

public/components/icon/icon.js

@@ -59,6 +59,38 @@ const kIcons = {
          46.080-19.456 47.104-52.224 17.408q-32.768 0-52.224-17.408t-20.48-47.104zM412.672
          749.568v-306.176h135.168v306.176h-135.168z"/>
   </svg>
+`,
+  "info-circled-filled": html`
+<svg viewBox="0 0 804 1024" aria-hidden="true">
+  <path fill="currentColor"
+        d="M0 512q0-97.28 37.888-186.368t102.4-152.576 152.576-102.4 187.392-37.888q97.28 0
+           186.368 37.888t152.576 102.4 102.4 152.576 37.888 186.368q0 97.28-37.888 186.368t-102.4
+           153.6-152.576 102.4-186.368 37.888-187.392-37.888-152.576-102.4-102.4-153.6-37.888-186.368z
+           M407.552 337.92q0 29.696 20.48 47.104t52.224 17.408q32.768 0 52.224-17.408t
+           19.456-47.104-19.456-46.080-52.224-17.408q-32.768 0-52.224 17.408t-20.48 46.080z
+           M412.672 749.568h135.168v-306.176h-135.168v306.176z"/>
+</svg>
+`,
+  link: html`
+<svg viewBox="0 0 1024 1024" aria-hidden="true">
+  <path fill="currentColor"
+        d="M832.512 695.296q0-23.552-16.384-38.912l-118.784-118.784q-16.384-16.384-38.912-16.384-24.576 0
+           -40.96 18.432 1.024 1.024 10.24 10.24t12.288 12.288 9.216 11.264 7.168 14.336 2.048 15.36q0
+           23.552-16.384 38.912t-38.912 16.384q-8.192 0-15.36-2.048t-14.336-7.168-11.264-9.216-12.288-12.288
+           -10.24-10.24q-19.456 17.408-19.456 40.96t16.384 38.912l117.76 118.784q15.36 15.36 38.912 15.36
+           22.528 0 38.912-15.36l83.968-82.944q16.384-16.384 16.384-37.888z
+           M430.080 291.84q0-22.528-15.36-38.912l-117.76-117.76q-16.384-16.384-38.912-16.384t-38.912 15.36
+           l-83.968 83.968q-16.384 15.36-16.384 37.888t16.384 38.912l118.784 118.784q15.36 15.36 38.912
+           15.36t40.96-17.408q-2.048-2.048-11.264-11.264t-12.288-12.288-8.192-10.24-7.168-14.336-2.048
+           -16.384q0-22.528 15.36-38.912t38.912-15.36q9.216 0 16.384 2.048t14.336 7.168 11.264 8.192
+           12.288 12.288 10.24 11.264q18.432-17.408 18.432-41.984z
+           M942.080 695.296q0 67.584-49.152 115.712l-83.968 82.944q-47.104 48.128-115.712 48.128-69.632 0
+           -116.736-49.152l-117.76-117.76q-47.104-48.128-47.104-116.736 0-69.632 50.176-118.784l-50.176
+           -50.176q-49.152 50.176-118.784 50.176-68.608 0-116.736-48.128l-118.784-118.784q-48.128-48.128
+           -48.128-116.736t48.128-115.712l83.968-83.968q48.128-47.104 116.736-47.104t116.736 48.128l117.76
+           118.784q47.104 47.104 47.104 115.712 0 70.656-50.176 119.808l50.176 50.176q49.152-50.176
+           118.784-50.176 68.608 0 116.736 48.128l118.784 118.784q48.128 48.128 48.128 116.736z"/>
+</svg>
 `
 };
 

public/components/package/package.css

@@ -1,7 +1,6 @@
 @import url("./header/header.css");
 @import url("./pannels/scripts/scripts.css");
 @import url("./pannels/overview/overview.css");
-@import url("./pannels/vulnerabilities/vulnerabilities.css");
 @import url("./pannels/scorecard/scorecard.css");
 @import url("./pannels/warnings/warnings.css");
 

public/components/package/package.js

@@ -98,8 +98,17 @@ export class PackageInfo {
     const licenses = document.createElement("package-licenses");
     licenses.package = this;
     licenses.id = "pan-licenses";
-    files.classList.add("package-container", "hidden");
+    licenses.classList.add("package-container", "hidden");
     panLicenses.parentElement.replaceChild(licenses, panLicenses);
+
+    const panVulns = packageHTMLElement.querySelector("#pan-vulnerabilities");
+    const vulns = document.createElement("package-vulnerabilities");
+    vulns.package = this;
+    vulns.vulnerabilityStrategy = window.vulnerabilityStrategy;
+    vulns.theme = window.settings.config.theme;
+    vulns.id = "pan-vulnerabilities";
+    vulns.classList.add("package-container", "hidden");
+    panVulns.parentElement.replaceChild(vulns, panVulns);
   }
 
   /**
@@ -162,7 +171,8 @@ export class PackageInfo {
     new Pannels.Overview(this).generate(clone);
     new Pannels.Warnings(this).generate(clone);
     new Pannels.Scripts(this).generate(clone);
-    new Pannels.Vulnerabilities(this).generate(clone);
+    this.addNavigationSignal(clone.getElementById("vulnerabilities-nav-menu"),
+      this.dependency.vulnerabilities.length);
     if (window.settings.config.disableExternalRequests === false) {
       new Pannels.Scorecard(this).generate(clone);
     }