npm - @peculiar/certificates-viewer - Versions diffs - 3.10.1 → 4.0.1 - Mend

@peculiar/certificates-viewer 3.10.1 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (554) hide show

package/README.md CHANGED Viewed

@@ -1,87 +1,63 @@
-# `@peculiar/certificates-viewer`
+# @peculiar/certificates-viewer
 Peculiar Certificate Viewer web-components makes it easy for you to display certificate related details in your web application.
-## Installation
+## CDN
-#### npm
-```
-npm install @peculiar/certificates-viewer
-```
-#### cdn
+It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the web-components from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor:
 ```html
-<head>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.css">
-</head>
+<html>
+  <head>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@peculiar/certificates-viewer/dist/peculiar/peculiar.css" />
+  </head>
+  <body>
+    <peculiar-certificate-viewer
+      certificate="MIIFWjCCA0KgAwIBAgIQbkepxUtHDA3sM9CJuRz04TANBgkqhkiG9w0BAQwFADBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAwMDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC2EQKLHuOhd5s73L+UPreVp0A8of2C+X0yBoJx9vaMf/vo27xqLpeXo4xL+Sv2sfnOhB2x+cWX3u+58qPpvBKJXqeqUqv4IyfLpLGcY9vXmX7wCl7raKb0xlpHDU0QM+NOsROjyBhsS+z8CZDfnWQpJSMHobTSPS5g4M/SCYe7zUjwTcLCeoiKu7rPWRnWr4+wB7CeMfGCwcDfLqZtbBkOtdh+JhpFAz2weaSUKK0PfyblqAj+lug8aJRT7oM6iCsVlgmy4HqMLnXWnOunVmSPlk9orj2XwoSPwLxAwAtcvfaHszVsrBhQf4TgTM2S0yDpM7xSma8ytSmzJSq0SPly4cpk9+aCEI3oncKKiPo4Zor8Y/kB+Xj9e1x3+naH+uzfsQ55lVe0vSbv1gHR6xYKu44LtcXFilWr06zqkUspzBmkMiVOKvFlRNACzqrOSbTqn3yDsEB750Orp2yjj32JgfpMpf/VjsPOS+C12LOORc92wO1AK/1TD7Cn1TsNsYqiA94xrcx36m97PtbfkSIS5r762DL8EGMUUXLeXdYWk70paDPvOmbsB4om3xPXV2V4J95eSRQAogB/mqghtqmxlbCluQ0WEdrHbEg8QOB+DVrNVjzRlwW5y0vtOUucxD/SVRNuJLDWcfr0wbrM7Rv1/oFB2ACYPTrIrnqYNxgFlQIDAQABo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQU5K8rJnEaK0gnhS9SZizv8IkTcT4wDQYJKoZIhvcNAQEMBQADggIBADiWCu49tJYeX++dnAsznyvgyv3SjgofQXSlfKqE1OXyHuY3UjKcC9FhHb8owbZEKTV1d5iyfNm9dKyKaOOpMQkpAWBz40d8U6iQSifvS9efk+eCNs6aaAyC58/UEBZvXw6ZXPYfcX3v73svfuo21pdwCxXu11xWajOl40k4DLh9+42FpLFZXvRq4d2h9mREruZRgyFmxhE+885H7pwoHyXa/6xmld01D1zvICxi/ZG6qcz8WpyTgYMpl0p8WnK0OdC3d8t5/Wk6kjftbjhlRn7pYL15iJdfOBL07q9bgsiG1eGZbYwE8na6SfZu6W0eX6DvJ4J2QPim01hcDyxC2kLGe4g0x8HYRZvBPsVhHdljUEn2NIVq4BjFbkerQUIpm/ZgDdIx02OYI5NaAIFItO/Nis3Jz5nu2Z6qNuFoS3FJFDYoOj0dzpqPJeaAcWErtXvM+SUWgeExX6GjfhaknBZqlxi9dnKlC54dNuYvoS++cJEPqOba+MSSQGwlfnuzCdyyF62ARPBopY+Udf90WuioAnwMCeKpSwughQtiue+hMZL77/ZRBIls6Kl0obsXs7X9SQ98POyDGCBDTtWTurQ0sR8WNh8M5mQ5Fkzc4P4dyKliPUDqysU0ArSuiYgzNdwsE3PYJ/HQcu51OyLemGhmW/HGY0dVHLqlCFF1pkgl"
+    />
+  </body>
+</html>
 ```
-## Usage
-Then you can use the element anywhere in your template, JSX, html, etc.
+## NPM
-#### `peculiar-certificates-viewer`
+To get started with using components install the `@peculiar/certificates-viewer` package:
-Web-component to decode and display certificates details table like done on both the [google](https://pki.goog/) and [amazon](https://www.amazontrust.com/repository/) Certificate Authority repository pages.
-```html
-<script>
-  var pvCertificatesViewer = document.createElement('peculiar-certificates-viewer');
-  pvCertificatesViewer.certificates = [
-    {
-      value: "MIIFWjCCA0KgAwIBAgIQbkepxUtHDA3sM9CJuRz04TANBgkqhkiG9w0BAQwFADBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAwMDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC2EQKLHuOhd5s73L+UPreVp0A8of2C+X0yBoJx9vaMf/vo27xqLpeXo4xL+Sv2sfnOhB2x+cWX3u+58qPpvBKJXqeqUqv4IyfLpLGcY9vXmX7wCl7raKb0xlpHDU0QM+NOsROjyBhsS+z8CZDfnWQpJSMHobTSPS5g4M/SCYe7zUjwTcLCeoiKu7rPWRnWr4+wB7CeMfGCwcDfLqZtbBkOtdh+JhpFAz2weaSUKK0PfyblqAj+lug8aJRT7oM6iCsVlgmy4HqMLnXWnOunVmSPlk9orj2XwoSPwLxAwAtcvfaHszVsrBhQf4TgTM2S0yDpM7xSma8ytSmzJSq0SPly4cpk9+aCEI3oncKKiPo4Zor8Y/kB+Xj9e1x3+naH+uzfsQ55lVe0vSbv1gHR6xYKu44LtcXFilWr06zqkUspzBmkMiVOKvFlRNACzqrOSbTqn3yDsEB750Orp2yjj32JgfpMpf/VjsPOS+C12LOORc92wO1AK/1TD7Cn1TsNsYqiA94xrcx36m97PtbfkSIS5r762DL8EGMUUXLeXdYWk70paDPvOmbsB4om3xPXV2V4J95eSRQAogB/mqghtqmxlbCluQ0WEdrHbEg8QOB+DVrNVjzRlwW5y0vtOUucxD/SVRNuJLDWcfr0wbrM7Rv1/oFB2ACYPTrIrnqYNxgFlQIDAQABo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQU5K8rJnEaK0gnhS9SZizv8IkTcT4wDQYJKoZIhvcNAQEMBQADggIBADiWCu49tJYeX++dnAsznyvgyv3SjgofQXSlfKqE1OXyHuY3UjKcC9FhHb8owbZEKTV1d5iyfNm9dKyKaOOpMQkpAWBz40d8U6iQSifvS9efk+eCNs6aaAyC58/UEBZvXw6ZXPYfcX3v73svfuo21pdwCxXu11xWajOl40k4DLh9+42FpLFZXvRq4d2h9mREruZRgyFmxhE+885H7pwoHyXa/6xmld01D1zvICxi/ZG6qcz8WpyTgYMpl0p8WnK0OdC3d8t5/Wk6kjftbjhlRn7pYL15iJdfOBL07q9bgsiG1eGZbYwE8na6SfZu6W0eX6DvJ4J2QPim01hcDyxC2kLGe4g0x8HYRZvBPsVhHdljUEn2NIVq4BjFbkerQUIpm/ZgDdIx02OYI5NaAIFItO/Nis3Jz5nu2Z6qNuFoS3FJFDYoOj0dzpqPJeaAcWErtXvM+SUWgeExX6GjfhaknBZqlxi9dnKlC54dNuYvoS++cJEPqOba+MSSQGwlfnuzCdyyF62ARPBopY+Udf90WuioAnwMCeKpSwughQtiue+hMZL77/ZRBIls6Kl0obsXs7X9SQ98POyDGCBDTtWTurQ0sR8WNh8M5mQ5Fkzc4P4dyKliPUDqysU0ArSuiYgzNdwsE3PYJ/HQcu51OyLemGhmW/HGY0dVHLqlCFF1pkgl",
-      name: "GTS Root R1",
-      tests: {
-        valid: "https://good.r1demo.pki.goog/",
-        revoked: "https://revoked.r1demo.pki.goog/",
-        expired: "https://expired.r1demo.pki.goog/",
-      },
-    },
-    {
-      value: "MIIFWjCCA0KgAwIBAgIQbkepxlqz5yDFMJo/aFLybzANBgkqhkiG9w0BAQwFADBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjIwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAwMDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjIwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQDO3v2m++zsFDQ8BwZabFn3GTXd98GdVarTzTukk3LvCvptnfbwhYBboUhSnznFt+4orO/LdmgUud+tAWyZH8QiHZ/+cnfgLFuv5AS/T3KgGjSY6Dlo7JUle3ah5mm5hRm9iYz+re026nO8/4Piy33B0s5Ks40FnotJk9/BW9BuXvAuMC6C/Pq8tBcKSOWIm8Wba96wyrQD8Nr0kLhlZPdcTK3ofmZemde4wj7I0BOdre7kRXuJVfeKH2JShBKzwkCX44ofR5GmdFrS+LFjKBC4swm4VndAoiaYecb+3yXuPuWgf9RhD1FLPD+M2uFwdNjCaKH5wQzpoeJ/u1U8dgbuak7MkogwTZq9TwtImoS1mKPV+3PBV2HdKFZ1E66HjucMUQkQdYhMvI35ezzUIkgfKtzra7tEscszcTJGr61K8YzodDqs5xoic4DSMPclQsciOzsSrZYuxsN2B6ogtzVJV+mSSeh2FnIxZyuWfoqjx5RWIr9qS34BIbIjMt/kmkRtWVtd9QCgHJvGeJeNkP+byKq0rxFROV7Z+2et1VsRnTKaG73VululycslaVNVJ1zgyjbLiGH7HrfQy+4W+9OmTN6SpdTi3/UGVN4unUu0kzCqgc7dGtxRcw1PcOnlthYhGXmy5okLdWTK1au8CcEYof/UVKGFPP0UJAOyh9OktwIDAQABo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQUu//KjiOfT5nK2+JopqUVJxce2Q4wDQYJKoZIhvcNAQEMBQADggIBALZp8KZ3/p7uC4Gt4cCpx/k1HUCCq+YEtN/L9x0Pg/B+E02NjO7jMyLDOfxA325BS0JTvhaI8dI4XsRomRyYUpOM52jtG2pzegVATX9lO9ZY8c6DR2Dj/5epnGB3GFW1fgiTz9D2PGcDFWEJ+YF59exTpJ/JjwGLc8R3dtyDovUMSRqodt6Sm2T4syzFJ9MHwAiApJiS4wGWAqoC7o87xdFtCjMwc3i5T1QWvwsHoaRc5svJXISPD+AVdyx+Jn7axEvbpxZ3B7DNdehyQtaVhJ2Gg/LkkM0JR9SLA3DaWsYDQvTtN6LwG1BUSw7YhN4ZKJmBR64JGz9I0cNv4rBgF/XuIwKl2gBbbZCr7qLpGzvpx0QnRY5rn/WkhLx3+WuXrD5RRaIRpsyF7gpo8j5QOHokYh4XIDdtak23CZvJ/KRY9bb7nE4Yu5UC56GtmwfuNmsk0jmGwZODUNKBRqhfYlcsu2xkiAhu7xNUX90txGdj08+JN7+dIPT7eoOboB6BAFDC5AwiWVIQ7UNWhwD4FFKnHYuTjKJNRn8nxnGbJN7k2oaLDX5rIMHAnuFl2GqjpuiFizoHCBy69Y9Vmhh1fuXsgWbRIXOhNUQLgD1bnF5vKheW0YMjiGZt5obicDIvUiLnyOd/xCxgXS/Dr55FBcOEArf9LAhST4Ldo/DUhgkC",
-    },
-  ];
-  document.body.appendChild(pvCertificatesViewer);
-</script>
+```
+npm install @peculiar/certificates-viewer
 ```
-All properties you can find on the [page](https://github.com/PeculiarVentures/pv-certificates-viewer/tree/master/packages/webcomponents/src/components/certificates-viewer#properties).
+Import the components and stylesheets from peculiar in your main app file:
-#### `peculiar-certificate-viewer`
+```ts
+import { defineCustomElements } from '@peculiar/certificates-viewer/loader';
+import '@peculiar/certificates-viewer/dist/peculiar/peculiar.css';
+defineCustomElements();
+```
-Web-component to decode and display certificate details such as the subject, issuer, signature, public key info, and extensions.
+Then you can use a components anywhere in your HTML.
 ```html
-<peculiar-certificate-viewer
-  certificate="MIIFWjCCA0KgAwIBAgIQbkepxUtHDA3sM9CJuRz04TANBgkqhkiG9w0BAQwFADBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAwMDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC2EQKLHuOhd5s73L+UPreVp0A8of2C+X0yBoJx9vaMf/vo27xqLpeXo4xL+Sv2sfnOhB2x+cWX3u+58qPpvBKJXqeqUqv4IyfLpLGcY9vXmX7wCl7raKb0xlpHDU0QM+NOsROjyBhsS+z8CZDfnWQpJSMHobTSPS5g4M/SCYe7zUjwTcLCeoiKu7rPWRnWr4+wB7CeMfGCwcDfLqZtbBkOtdh+JhpFAz2weaSUKK0PfyblqAj+lug8aJRT7oM6iCsVlgmy4HqMLnXWnOunVmSPlk9orj2XwoSPwLxAwAtcvfaHszVsrBhQf4TgTM2S0yDpM7xSma8ytSmzJSq0SPly4cpk9+aCEI3oncKKiPo4Zor8Y/kB+Xj9e1x3+naH+uzfsQ55lVe0vSbv1gHR6xYKu44LtcXFilWr06zqkUspzBmkMiVOKvFlRNACzqrOSbTqn3yDsEB750Orp2yjj32JgfpMpf/VjsPOS+C12LOORc92wO1AK/1TD7Cn1TsNsYqiA94xrcx36m97PtbfkSIS5r762DL8EGMUUXLeXdYWk70paDPvOmbsB4om3xPXV2V4J95eSRQAogB/mqghtqmxlbCluQ0WEdrHbEg8QOB+DVrNVjzRlwW5y0vtOUucxD/SVRNuJLDWcfr0wbrM7Rv1/oFB2ACYPTrIrnqYNxgFlQIDAQABo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQU5K8rJnEaK0gnhS9SZizv8IkTcT4wDQYJKoZIhvcNAQEMBQADggIBADiWCu49tJYeX++dnAsznyvgyv3SjgofQXSlfKqE1OXyHuY3UjKcC9FhHb8owbZEKTV1d5iyfNm9dKyKaOOpMQkpAWBz40d8U6iQSifvS9efk+eCNs6aaAyC58/UEBZvXw6ZXPYfcX3v73svfuo21pdwCxXu11xWajOl40k4DLh9+42FpLFZXvRq4d2h9mREruZRgyFmxhE+885H7pwoHyXa/6xmld01D1zvICxi/ZG6qcz8WpyTgYMpl0p8WnK0OdC3d8t5/Wk6kjftbjhlRn7pYL15iJdfOBL07q9bgsiG1eGZbYwE8na6SfZu6W0eX6DvJ4J2QPim01hcDyxC2kLGe4g0x8HYRZvBPsVhHdljUEn2NIVq4BjFbkerQUIpm/ZgDdIx02OYI5NaAIFItO/Nis3Jz5nu2Z6qNuFoS3FJFDYoOj0dzpqPJeaAcWErtXvM+SUWgeExX6GjfhaknBZqlxi9dnKlC54dNuYvoS++cJEPqOba+MSSQGwlfnuzCdyyF62ARPBopY+Udf90WuioAnwMCeKpSwughQtiue+hMZL77/ZRBIls6Kl0obsXs7X9SQ98POyDGCBDTtWTurQ0sR8WNh8M5mQ5Fkzc4P4dyKliPUDqysU0ArSuiYgzNdwsE3PYJ/HQcu51OyLemGhmW/HGY0dVHLqlCFF1pkgl"
-/>
+<body>
+  <peculiar-certificate-viewer
+    certificate="MIIFWjCCA0KgAwIBAgIQbkepxUtHDA3sM9CJuRz04TANBgkqhkiG9w0BAQwFADBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAwMDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC2EQKLHuOhd5s73L+UPreVp0A8of2C+X0yBoJx9vaMf/vo27xqLpeXo4xL+Sv2sfnOhB2x+cWX3u+58qPpvBKJXqeqUqv4IyfLpLGcY9vXmX7wCl7raKb0xlpHDU0QM+NOsROjyBhsS+z8CZDfnWQpJSMHobTSPS5g4M/SCYe7zUjwTcLCeoiKu7rPWRnWr4+wB7CeMfGCwcDfLqZtbBkOtdh+JhpFAz2weaSUKK0PfyblqAj+lug8aJRT7oM6iCsVlgmy4HqMLnXWnOunVmSPlk9orj2XwoSPwLxAwAtcvfaHszVsrBhQf4TgTM2S0yDpM7xSma8ytSmzJSq0SPly4cpk9+aCEI3oncKKiPo4Zor8Y/kB+Xj9e1x3+naH+uzfsQ55lVe0vSbv1gHR6xYKu44LtcXFilWr06zqkUspzBmkMiVOKvFlRNACzqrOSbTqn3yDsEB750Orp2yjj32JgfpMpf/VjsPOS+C12LOORc92wO1AK/1TD7Cn1TsNsYqiA94xrcx36m97PtbfkSIS5r762DL8EGMUUXLeXdYWk70paDPvOmbsB4om3xPXV2V4J95eSRQAogB/mqghtqmxlbCluQ0WEdrHbEg8QOB+DVrNVjzRlwW5y0vtOUucxD/SVRNuJLDWcfr0wbrM7Rv1/oFB2ACYPTrIrnqYNxgFlQIDAQABo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQU5K8rJnEaK0gnhS9SZizv8IkTcT4wDQYJKoZIhvcNAQEMBQADggIBADiWCu49tJYeX++dnAsznyvgyv3SjgofQXSlfKqE1OXyHuY3UjKcC9FhHb8owbZEKTV1d5iyfNm9dKyKaOOpMQkpAWBz40d8U6iQSifvS9efk+eCNs6aaAyC58/UEBZvXw6ZXPYfcX3v73svfuo21pdwCxXu11xWajOl40k4DLh9+42FpLFZXvRq4d2h9mREruZRgyFmxhE+885H7pwoHyXa/6xmld01D1zvICxi/ZG6qcz8WpyTgYMpl0p8WnK0OdC3d8t5/Wk6kjftbjhlRn7pYL15iJdfOBL07q9bgsiG1eGZbYwE8na6SfZu6W0eX6DvJ4J2QPim01hcDyxC2kLGe4g0x8HYRZvBPsVhHdljUEn2NIVq4BjFbkerQUIpm/ZgDdIx02OYI5NaAIFItO/Nis3Jz5nu2Z6qNuFoS3FJFDYoOj0dzpqPJeaAcWErtXvM+SUWgeExX6GjfhaknBZqlxi9dnKlC54dNuYvoS++cJEPqOba+MSSQGwlfnuzCdyyF62ARPBopY+Udf90WuioAnwMCeKpSwughQtiue+hMZL77/ZRBIls6Kl0obsXs7X9SQ98POyDGCBDTtWTurQ0sR8WNh8M5mQ5Fkzc4P4dyKliPUDqysU0ArSuiYgzNdwsE3PYJ/HQcu51OyLemGhmW/HGY0dVHLqlCFF1pkgl"
+  />
+</body>
 ```
-All properties you can find on the [page](https://github.com/PeculiarVentures/pv-certificates-viewer/tree/master/packages/webcomponents/src/components/certificate-viewer#properties).
+## Certificates viewer + React
-## Theming
+To add the `@peculiar/certificates-viewer` to an already existing React project see the [react](../webcomponents-react/README.md) using guide.
-This component use [CSS variables](https://github.com/PeculiarVentures/pv-certificates-viewer/tree/master/packages/webcomponents/src/styles/peculiar.scss) to work with themes. You can customize colors declaring it in your main CSS file:
+## Examples
-```css
-body {
-  --pv-color-dark-rgb: 42, 49, 52;
-  --pv-color-light-rgb: 255, 255, 255;
-  --pv-color-grey_3-rgb: 209, 213, 217;
-  --pv-color-grey_5-rgb: 134, 145, 150;
-  --pv-color-attention-rgb: 247, 168, 49;
-  --pv-color-primary-rgb: 53, 132, 247;
-}
-```
+- [Root CAs](https://codepen.io/donskov/pen/gOpQGYa)
+- [Subordinate CAs](https://codepen.io/donskov/pen/poJQWea)
+- [Certificate details](https://codepen.io/donskov/pen/RwPqLLa)
-## Examples
+### Customize the theme
-- [Root CAs](https://understandingwebpki.com/examples.html#root-cas)
-- [Subordinate CAs](https://understandingwebpki.com/examples.html#subordinate-cas)
-- [Certificate details](https://understandingwebpki.com/examples.html#certificate-details)
+To customize the look and feel of the components, components have CSS variables you can override to provide a theme for your components. See the supported CSS variables in [peculiar.scss](./src/css/peculiar.scss) file.

package/components/arrow_top.js ADDED Viewed

@@ -0,0 +1,34 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { h } from '@stencil/core/internal/client';
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const ArrowBottomIcon = (props) => {
+  const { color = 'gray-10' } = props;
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", fill: "none" },
+    h("path", { stroke: `var(--pv-color-${color})`, "stroke-linecap": "round", "stroke-width": "1.5", d: "m19.222 12.778-3.851 4.279a.2.2 0 0 1-.297 0l-3.852-4.28" })));
+};
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const ArrowTopIcon = (props) => {
+  const { color = 'gray-10' } = props;
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", fill: "none" },
+    h("path", { stroke: `var(--pv-color-${color})`, "stroke-linecap": "round", "stroke-width": "1.5", d: "m11.222 17.722 3.852-4.28a.2.2 0 0 1 .297 0l3.851 4.28" })));
+};
+export { ArrowTopIcon as A, ArrowBottomIcon as a };
+//# sourceMappingURL=arrow_top.js.map

package/components/arrow_top.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"arrow_top.js","mappings":";;;;;AAAA;;;;;;;MAWa,eAAe,GAA+C,CAAC,KAAK;EAC/E,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;EAEpC,QACE,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM;IAEX,YACE,MAAM,EAAE,kBAAkB,KAAK,GAAG,oBAEnB,OAAO,kBACT,KAAK,EAClB,CAAC,EAAC,0DAA0D,GAC5D,CACE,EACN;AACJ;;AC9BA;;;;;;;MAWa,YAAY,GAA+C,CAAC,KAAK;EAC5E,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;EAEpC,QACE,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM;IAEX,YACE,MAAM,EAAE,kBAAkB,KAAK,GAAG,oBAEnB,OAAO,kBACT,KAAK,EAClB,CAAC,EAAC,wDAAwD,GAC1D,CACE,EACN;AACJ;;;;","names":[],"sources":["src/components/icons/arrow_bottom.tsx","src/components/icons/arrow_top.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h } from '@stencil/core';\nimport type { ColorType } from '../../interface';\n\nexport const ArrowBottomIcon: FunctionalComponent<{ color?: ColorType }> = (props) => {\n const { color = 'gray-10' } = props;\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n fill=\"none\"\n >\n <path\n stroke={`var(--pv-color-${color})`}\n // eslint-disable-next-line react/no-unknown-property\n stroke-linecap=\"round\"\n stroke-width=\"1.5\"\n d=\"m19.222 12.778-3.851 4.279a.2.2 0 0 1-.297 0l-3.852-4.28\"\n />\n </svg>\n );\n};\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h } from '@stencil/core';\nimport type { ColorType } from '../../interface';\n\nexport const ArrowTopIcon: FunctionalComponent<{ color?: ColorType }> = (props) => {\n const { color = 'gray-10' } = props;\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n fill=\"none\"\n >\n <path\n stroke={`var(--pv-color-${color})`}\n // eslint-disable-next-line react/no-unknown-property\n stroke-linecap=\"round\"\n stroke-width=\"1.5\"\n d=\"m11.222 17.722 3.852-4.28a.2.2 0 0 1 .297 0l3.851 4.28\"\n />\n </svg>\n );\n};\n"],"version":3}

package/components/attribute-certificate-viewer.js ADDED Viewed

@@ -0,0 +1,281 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { h, proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
+import { A as AsnData, c as certificateRawToBuffer, a as AttributeCertificate, d as dateDiff, E as Extension, b as AsnConvert, g as getCertificateThumbprint, h as hexFormat, e as base64Format, R as RowTitle, l as l10n, G as GeneralNamePart, f as RowValue, i as getStringByOID, B as BasicInformation, S as Signature, T as Thumbprints, j as getLEILink, k as getDNSNameLink, m as getIPAddressLink, n as Extensions, M as Miscellaneous } from './miscellaneous.js';
+import { b as build, D as Download } from './download.js';
+import { A as Attribute, a as Attributes } from './index2.js';
+import { T as Typography } from './button.js';
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class X509AttributeCertificate extends AsnData {
+  constructor(raw) {
+    var _a;
+    super(certificateRawToBuffer(raw), AttributeCertificate);
+    this.thumbprints = {};
+    this.type = 'X.509 Attribute Certificate';
+    const { acinfo } = this.asn;
+    this.serialNumber = build.Convert.ToHex(acinfo.serialNumber);
+    this.version = acinfo.version;
+    const notBefore = acinfo.attrCertValidityPeriod.notBeforeTime;
+    if (!notBefore) {
+      throw new Error("Cannot get 'notBefore' value");
+    }
+    this.notBefore = notBefore;
+    const notAfter = acinfo.attrCertValidityPeriod.notAfterTime;
+    if (!notAfter) {
+      throw new Error("Cannot get 'notAfter' value");
+    }
+    this.notAfter = notAfter;
+    this.validity = dateDiff(this.notBefore, this.notAfter);
+    this.issuer = acinfo.issuer.v1Form || ((_a = acinfo.issuer.v2Form) === null || _a === void 0 ? void 0 : _a.issuerName);
+    this.holder = acinfo.holder;
+  }
+  get signature() {
+    const { signatureValue, signatureAlgorithm } = this.asn;
+    return {
+      value: signatureValue,
+      algorithm: signatureAlgorithm.algorithm,
+    };
+  }
+  parseExtensions() {
+    const { acinfo } = this.asn;
+    if (acinfo.extensions) {
+      this.extensions = acinfo.extensions
+        .map((e) => new Extension(AsnConvert.serialize(e)));
+    }
+  }
+  parseAttributes() {
+    const { acinfo } = this.asn;
+    if (acinfo.attributes) {
+      this.attributes = acinfo.attributes
+        .map((e) => new Attribute(AsnConvert.serialize(e)));
+    }
+  }
+  async getThumbprint(algorithm = 'SHA-1') {
+    try {
+      const thumbprint = await getCertificateThumbprint(algorithm, this.raw);
+      if (thumbprint) {
+        this.thumbprints[algorithm] = build.Convert.ToHex(thumbprint);
+      }
+    }
+    catch (error) {
+      console.error('Error thumbprint get:', error);
+    }
+  }
+  exportAsBase64() {
+    return build.Convert.ToBase64(this.raw);
+  }
+  exportAsHexFormatted() {
+    return hexFormat(build.Convert.ToHex(this.raw));
+  }
+  exportAsPemFormatted() {
+    return `-----BEGIN ATTRIBUTE CERTIFICATE-----\n${base64Format(this.exportAsBase64())}\n-----END ATTRIBUTE CERTIFICATE-----`;
+  }
+  get commonName() {
+    return `attribute-certificate-${this.thumbprints['SHA-1']}`;
+  }
+  downloadAsPEM(name) {
+    Download.attrCert.asPEM(this.exportAsPemFormatted(), name || this.commonName);
+  }
+  downloadAsDER(name) {
+    Download.attrCert.asDER(this.exportAsHexFormatted(), name || this.commonName);
+  }
+}
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const Holder = (props) => {
+  const { holder } = props;
+  if (!holder) {
+    return null;
+  }
+  const { baseCertificateID, objectDigestInfo } = holder;
+  return [
+    h(RowTitle, { value: l10n.getString('holder') }),
+    baseCertificateID && ([
+      baseCertificateID.issuer.map((item) => (h(GeneralNamePart, { generalName: item, getDNSNameLink: () => '', getIPAddressLink: () => '' }))),
+      h("tr", null,
+        h("td", null),
+        h("td", null)),
+      h(RowValue, { name: l10n.getString('serialNumber'), value: build.Convert.ToHex(baseCertificateID.serial), monospace: true }),
+      h("tr", null,
+        h("td", null),
+        h("td", null)),
+    ]),
+    objectDigestInfo && ([
+      h(RowValue, { name: l10n.getString('digestInfo'), value: "" }),
+      h(RowValue, { name: l10n.getString('algorithm'), value: getStringByOID(objectDigestInfo.digestAlgorithm.algorithm) }),
+      h(RowValue, { name: l10n.getString('value'), value: build.Convert.ToHex(objectDigestInfo.objectDigest), monospace: true }),
+      h(RowValue, { name: l10n.getString('type'), value: objectDigestInfo.digestedObjectType }),
+    ]),
+  ];
+};
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const Issuer = (props) => {
+  const { issuer } = props;
+  if (!issuer) {
+    return null;
+  }
+  return [
+    h(RowTitle, { value: l10n.getString('issuer') }),
+    issuer.map((item) => (h(GeneralNamePart, { generalName: item, getDNSNameLink: () => '', getIPAddressLink: () => '' }))),
+  ];
+};
+const certificateViewerCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent;font-family:var(--pv-font-family, inherit)}.t-h1{font-weight:var(--pv-text-h1-weight);font-size:var(--pv-text-h1-size);line-height:var(--pv-text-h1-height);letter-spacing:var(--pv-text-h1-spacing)}.t-h2{font-weight:var(--pv-text-h2-weight);font-size:var(--pv-text-h2-size);line-height:var(--pv-text-h2-height);letter-spacing:var(--pv-text-h2-spacing)}.t-h3{font-weight:var(--pv-text-h3-weight);font-size:var(--pv-text-h3-size);line-height:var(--pv-text-h3-height);letter-spacing:var(--pv-text-h3-spacing)}.t-h4{font-weight:var(--pv-text-h4-weight);font-size:var(--pv-text-h4-size);line-height:var(--pv-text-h4-height);letter-spacing:var(--pv-text-h4-spacing)}.t-h5{font-weight:var(--pv-text-h5-weight);font-size:var(--pv-text-h5-size);line-height:var(--pv-text-h5-height);letter-spacing:var(--pv-text-h5-spacing)}.t-s1{font-weight:var(--pv-text-s1-weight);font-size:var(--pv-text-s1-size);line-height:var(--pv-text-s1-height);letter-spacing:var(--pv-text-s1-spacing)}.t-s2{font-weight:var(--pv-text-s2-weight);font-size:var(--pv-text-s2-size);line-height:var(--pv-text-s2-height);letter-spacing:var(--pv-text-s2-spacing)}.t-b1{font-weight:var(--pv-text-b1-weight);font-size:var(--pv-text-b1-size);line-height:var(--pv-text-b1-height);letter-spacing:var(--pv-text-b1-spacing)}.t-b2{font-weight:var(--pv-text-b2-weight);font-size:var(--pv-text-b2-size);line-height:var(--pv-text-b2-height);letter-spacing:var(--pv-text-b2-spacing)}.t-b3{font-weight:var(--pv-text-b3-weight);font-size:var(--pv-text-b3-size);line-height:var(--pv-text-b3-height);letter-spacing:var(--pv-text-b3-spacing)}.t-btn1{font-weight:var(--pv-text-btn1-weight);font-size:var(--pv-text-btn1-size);line-height:var(--pv-text-btn1-height);letter-spacing:var(--pv-text-btn1-spacing)}.t-btn2{font-weight:var(--pv-text-btn2-weight);font-size:var(--pv-text-btn2-size);line-height:var(--pv-text-btn2-height);letter-spacing:var(--pv-text-btn2-spacing)}.t-c1{font-weight:var(--pv-text-c1-weight);font-size:var(--pv-text-c1-size);line-height:var(--pv-text-c1-height);letter-spacing:var(--pv-text-c1-spacing)}.t-c2{font-weight:var(--pv-text-c2-weight);font-size:var(--pv-text-c2-size);line-height:var(--pv-text-c2-height);letter-spacing:var(--pv-text-c2-spacing)}.c-primary-tint-5{--pv-color-base:var(--pv-color-primary-tint-5)}.c-primary-tint-4{--pv-color-base:var(--pv-color-primary-tint-4)}.c-primary-tint-3{--pv-color-base:var(--pv-color-primary-tint-3)}.c-primary-tint-2{--pv-color-base:var(--pv-color-primary-tint-2)}.c-primary-tint-1{--pv-color-base:var(--pv-color-primary-tint-1)}.c-primary{--pv-color-base:var(--pv-color-primary)}.c-primary-shade-1{--pv-color-base:var(--pv-color-primary-shade-1)}.c-primary-shade-2{--pv-color-base:var(--pv-color-primary-shade-2)}.c-primary-shade-3{--pv-color-base:var(--pv-color-primary-shade-3)}.c-primary-shade-4{--pv-color-base:var(--pv-color-primary-shade-4)}.c-primary-shade-5{--pv-color-base:var(--pv-color-primary-shade-5)}.c-primary-contrast{--pv-color-base:var(--pv-color-primary-contrast)}.c-secondary-tint-5{--pv-color-base:var(--pv-color-secondary-tint-5)}.c-secondary-tint-4{--pv-color-base:var(--pv-color-secondary-tint-4)}.c-secondary-tint-3{--pv-color-base:var(--pv-color-secondary-tint-3)}.c-secondary-tint-2{--pv-color-base:var(--pv-color-secondary-tint-2)}.c-secondary-tint-1{--pv-color-base:var(--pv-color-secondary-tint-1)}.c-secondary{--pv-color-base:var(--pv-color-secondary)}.c-secondary-shade-1{--pv-color-base:var(--pv-color-secondary-shade-1)}.c-secondary-shade-2{--pv-color-base:var(--pv-color-secondary-shade-2)}.c-secondary-shade-3{--pv-color-base:var(--pv-color-secondary-shade-3)}.c-secondary-shade-4{--pv-color-base:var(--pv-color-secondary-shade-4)}.c-secondary-shade-5{--pv-color-base:var(--pv-color-secondary-shade-5)}.c-secondary-contrast{--pv-color-base:var(--pv-color-secondary-contrast)}.c-wrong-tint-5{--pv-color-base:var(--pv-color-wrong-tint-5)}.c-wrong-tint-4{--pv-color-base:var(--pv-color-wrong-tint-4)}.c-wrong-tint-3{--pv-color-base:var(--pv-color-wrong-tint-3)}.c-wrong-tint-2{--pv-color-base:var(--pv-color-wrong-tint-2)}.c-wrong-tint-1{--pv-color-base:var(--pv-color-wrong-tint-1)}.c-wrong{--pv-color-base:var(--pv-color-wrong)}.c-wrong-shade-1{--pv-color-base:var(--pv-color-wrong-shade-1)}.c-wrong-shade-2{--pv-color-base:var(--pv-color-wrong-shade-2)}.c-wrong-shade-3{--pv-color-base:var(--pv-color-wrong-shade-3)}.c-wrong-shade-4{--pv-color-base:var(--pv-color-wrong-shade-4)}.c-wrong-shade-5{--pv-color-base:var(--pv-color-wrong-shade-5)}.c-wrong-contrast{--pv-color-base:var(--pv-color-wrong-contrast)}.c-attention-tint-5{--pv-color-base:var(--pv-color-attention-tint-5)}.c-attention-tint-4{--pv-color-base:var(--pv-color-attention-tint-4)}.c-attention-tint-3{--pv-color-base:var(--pv-color-attention-tint-3)}.c-attention-tint-2{--pv-color-base:var(--pv-color-attention-tint-2)}.c-attention-tint-1{--pv-color-base:var(--pv-color-attention-tint-1)}.c-attention{--pv-color-base:var(--pv-color-attention)}.c-attention-shade-1{--pv-color-base:var(--pv-color-attention-shade-1)}.c-attention-shade-2{--pv-color-base:var(--pv-color-attention-shade-2)}.c-attention-shade-3{--pv-color-base:var(--pv-color-attention-shade-3)}.c-attention-shade-4{--pv-color-base:var(--pv-color-attention-shade-4)}.c-attention-shade-5{--pv-color-base:var(--pv-color-attention-shade-5)}.c-success-tint-5{--pv-color-base:var(--pv-color-success-tint-5)}.c-success-tint-4{--pv-color-base:var(--pv-color-success-tint-4)}.c-success-tint-3{--pv-color-base:var(--pv-color-success-tint-3)}.c-success-tint-2{--pv-color-base:var(--pv-color-success-tint-2)}.c-success-tint-1{--pv-color-base:var(--pv-color-success-tint-1)}.c-success{--pv-color-base:var(--pv-color-success)}.c-success-shade-1{--pv-color-base:var(--pv-color-success-shade-1)}.c-success-shade-2{--pv-color-base:var(--pv-color-success-shade-2)}.c-success-shade-3{--pv-color-base:var(--pv-color-success-shade-3)}.c-success-shade-4{--pv-color-base:var(--pv-color-success-shade-4)}.c-success-shade-5{--pv-color-base:var(--pv-color-success-shade-5)}.c-black{--pv-color-base:var(--pv-color-black)}.c-gray-10{--pv-color-base:var(--pv-color-gray-10)}.c-gray-9{--pv-color-base:var(--pv-color-gray-9)}.c-gray-8{--pv-color-base:var(--pv-color-gray-8)}.c-gray-7{--pv-color-base:var(--pv-color-gray-7)}.c-gray-6{--pv-color-base:var(--pv-color-gray-6)}.c-gray-5{--pv-color-base:var(--pv-color-gray-5)}.c-gray-4{--pv-color-base:var(--pv-color-gray-4)}.c-gray-3{--pv-color-base:var(--pv-color-gray-3)}.c-gray-2{--pv-color-base:var(--pv-color-gray-2)}.c-gray-1{--pv-color-base:var(--pv-color-gray-1)}.c-white{--pv-color-base:var(--pv-color-white)}.c-extra-1{--pv-color-base:var(--pv-color-extra-1)}.c-extra-2{--pv-color-base:var(--pv-color-extra-2)}.typography{color:var(--pv-color-base)}.button{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;background:transparent;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-decoration:none;outline:none;font-family:inherit;border-radius:4px;height:var(--pv-size-base-6);min-width:var(--pv-size-base-6);padding:0 var(--pv-size-base-2);-webkit-transition:background-color 200ms ease 0s;transition:background-color 200ms ease 0s;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--pv-size-base-2);font-size:0}.button.m_no_padding{padding:0}.button:hover{background-color:var(--pv-color-gray-3)}.button:focus{background-color:var(--pv-color-gray-4)}.button:active{background-color:var(--pv-color-gray-5)}:host{display:block;width:100%;position:relative;min-width:280px;min-height:300px;word-wrap:break-word;word-break:break-word}th,td{border:none}table{width:100%;border-spacing:0;border-collapse:collapse}table td{padding:var(--pv-size-base-2) var(--pv-size-base-4);vertical-align:top}table td:first-child{width:220px}table td:last-child{width:calc(100% - 220px)}table td.monospace{max-width:0}table td.divider{padding:var(--pv-size-base-2) 0}table td.divider span{height:1px;display:block;background-color:var(--pv-color-gray-4)}table .title td{padding-top:var(--pv-size-base-6);padding-bottom:var(--pv-size-base-2)}table table{border-left:1px solid var(--pv-color-gray-5)}.status_wrapper{min-height:inherit;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([data-mobile-screen-view=true]) table,:host([data-mobile-screen-view=true]) tr,:host([data-mobile-screen-view=true]) td{display:block}:host([data-mobile-screen-view=true]) table tr{padding:var(--pv-size-base-2) 0}:host([data-mobile-screen-view=true]) table tr.title{padding-top:var(--pv-size-base-6)}:host([data-mobile-screen-view=true]) table tr.title td{padding:0 var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) table td{padding:0 var(--pv-size-base-4);width:100% !important;max-width:100% !important}:host([data-mobile-screen-view=true]) table td.divider{padding:0}";
+const AttributeCertificateViewer = /*@__PURE__*/ proxyCustomElement(class AttributeCertificateViewer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.getAuthKeyIdParentLink = (value) => {
+      var _a;
+      return (_a = this.authKeyIdParentLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
+    };
+    this.getAuthKeyIdSiblingsLink = (value) => {
+      var _a;
+      return (_a = this.authKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
+    };
+    this.getSubjectKeyIdChildrenLink = (value) => {
+      var _a;
+      return (_a = this.subjectKeyIdChildrenLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
+    };
+    this.getSubjectKeyIdSiblingsLink = (value) => {
+      var _a;
+      return (_a = this.subjectKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
+    };
+    this.certificate = undefined;
+    this.download = undefined;
+    this.authKeyIdParentLink = undefined;
+    this.authKeyIdSiblingsLink = undefined;
+    this.subjectKeyIdChildrenLink = undefined;
+    this.subjectKeyIdSiblingsLink = undefined;
+    this.mobileMediaQueryString = '(max-width: 900px)';
+    this.mobileScreenView = false;
+    this.isDecodeInProcess = true;
+  }
+  handleMediaQueryChange(event) {
+    this.mobileScreenView = event.matches;
+  }
+  componentWillLoad() {
+    this.decodeCertificate(this.certificate);
+    if (Build.isBrowser) {
+      this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);
+      this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));
+      this.mobileScreenView = this.mobileMediaQuery.matches;
+    }
+  }
+  disconnectedCallback() {
+    this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+  }
+  async decodeCertificate(certificate) {
+    this.isDecodeInProcess = true;
+    try {
+      if (certificate instanceof X509AttributeCertificate) {
+        this.certificateDecoded = certificate;
+      }
+      else if (typeof certificate === 'string') {
+        this.certificateDecoded = new X509AttributeCertificate(certificate);
+      }
+      else {
+        return;
+      }
+      this.certificateDecoded.parseExtensions();
+      this.certificateDecoded.parseAttributes();
+      await this.certificateDecoded.getThumbprint('SHA-1');
+      await this.certificateDecoded.getThumbprint('SHA-256');
+    }
+    catch (error) {
+      this.certificateDecodeError = error;
+      console.error('Error certificate parse:', error);
+    }
+    this.isDecodeInProcess = false;
+  }
+  /**
+   * Rerun decodeCertificate if previuos value not equal current value
+   */
+  watchCertificateAndDecode(newValue, oldValue) {
+    if (typeof newValue === 'string' && typeof oldValue === 'string') {
+      if (newValue !== oldValue) {
+        this.decodeCertificate(newValue);
+      }
+      return;
+    }
+    if (newValue instanceof X509AttributeCertificate
+      && oldValue instanceof X509AttributeCertificate) {
+      if (newValue.serialNumber !== oldValue.serialNumber) {
+        this.decodeCertificate(newValue);
+      }
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  renderErrorState() {
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "There was an error decoding this attribute certificate.")));
+  }
+  // eslint-disable-next-line class-methods-use-this
+  renderEmptyState() {
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no attribute certificate available.")));
+  }
+  render() {
+    if (this.certificateDecodeError) {
+      return this.renderErrorState();
+    }
+    if (!this.certificateDecoded) {
+      return this.renderEmptyState();
+    }
+    return (h(Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, h("table", null, h(BasicInformation, Object.assign({}, this.certificateDecoded)), h(Issuer, { issuer: this.certificateDecoded.issuer }), h(Holder, { holder: this.certificateDecoded.holder }), h(Signature, { signature: this.certificateDecoded.signature }), h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }), h(Attributes, { attributes: this.certificateDecoded.attributes, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink, getSubjectKeyIdChildrenLink: this.getSubjectKeyIdChildrenLink, getSubjectKeyIdSiblingsLink: this.getSubjectKeyIdSiblingsLink }), h(Extensions, { extensions: this.certificateDecoded.extensions, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink, getSubjectKeyIdChildrenLink: this.getSubjectKeyIdChildrenLink, getSubjectKeyIdSiblingsLink: this.getSubjectKeyIdSiblingsLink }), this.download && (h(Miscellaneous, { certificate: this.certificateDecoded })))));
+  }
+  static get watchers() { return {
+    "certificate": ["watchCertificateAndDecode"]
+  }; }
+  static get style() { return certificateViewerCss; }
+}, [1, "peculiar-attribute-certificate-viewer", {
+    "certificate": [1],
+    "download": [4],
+    "authKeyIdParentLink": [513, "auth-key-id-parent-link"],
+    "authKeyIdSiblingsLink": [513, "auth-key-id-siblings-link"],
+    "subjectKeyIdChildrenLink": [513, "subject-key-id-children-link"],
+    "subjectKeyIdSiblingsLink": [513, "subject-key-id-siblings-link"],
+    "mobileMediaQueryString": [1, "mobile-media-query-string"],
+    "mobileScreenView": [32],
+    "isDecodeInProcess": [32]
+  }, undefined, {
+    "certificate": ["watchCertificateAndDecode"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["peculiar-attribute-certificate-viewer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "peculiar-attribute-certificate-viewer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AttributeCertificateViewer);
+      }
+      break;
+  } });
+}
+export { AttributeCertificateViewer as A, X509AttributeCertificate as X, defineCustomElement as d };
+//# sourceMappingURL=attribute-certificate-viewer.js.map

package/components/attribute-certificate-viewer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"attribute-certificate-viewer.js","mappings":"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","names":["Convert"],"sources":["src/crypto/x509_attribute_certificate.ts","src/components/certificate-details-parts/holder.tsx","src/components/certificate-details-parts/issuer.tsx","src/components/certificate-viewer/certificate-viewer.scss?tag=peculiar-attribute-certificate-viewer&encapsulation=shadow","src/components/attribute-certificate-viewer/attribute-certificate-viewer.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { AsnConvert } from '@peculiar/asn1-schema';\nimport type { GeneralName } from '@peculiar/asn1-x509';\nimport { AttributeCertificate, Holder } from '@peculiar/asn1-x509-attr';\nimport { Convert } from 'pvtsutils';\n\nimport { dateDiff, Download } from '../utils';\n\nimport { AsnData } from './asn_data';\nimport { Extension, TExtensionValue } from './extension';\nimport { Attribute, TAttributeValue } from './attribute';\nimport {\n certificateRawToBuffer,\n hexFormat,\n base64Format,\n getCertificateThumbprint,\n} from './utils';\n\ninterface ISignature {\n algorithm: string;\n value: BufferSource;\n}\n\nexport class X509AttributeCertificate extends AsnData<AttributeCertificate> {\n public readonly serialNumber: string;\n\n public readonly version: number;\n\n public readonly notBefore: Date;\n\n public readonly notAfter: Date;\n\n public readonly validity: string;\n\n public extensions: Extension<TExtensionValue>[];\n\n public attributes: Attribute<TAttributeValue>[];\n\n public thumbprints: Record<string, string> = {};\n\n public readonly issuer: GeneralName[];\n\n public holder: Holder;\n\n public type: string = 'X.509 Attribute Certificate';\n\n constructor(raw: string) {\n super(certificateRawToBuffer(raw), AttributeCertificate);\n\n const { acinfo } = this.asn;\n\n this.serialNumber = Convert.ToHex(acinfo.serialNumber);\n this.version = acinfo.version;\n\n const notBefore = acinfo.attrCertValidityPeriod.notBeforeTime;\n\n if (!notBefore) {\n throw new Error(\"Cannot get 'notBefore' value\");\n }\n\n this.notBefore = notBefore;\n\n const notAfter = acinfo.attrCertValidityPeriod.notAfterTime;\n\n if (!notAfter) {\n throw new Error(\"Cannot get 'notAfter' value\");\n }\n\n this.notAfter = notAfter;\n this.validity = dateDiff(this.notBefore, this.notAfter);\n this.issuer = acinfo.issuer.v1Form || acinfo.issuer.v2Form?.issuerName;\n this.holder = acinfo.holder;\n }\n\n public get signature(): ISignature {\n const { signatureValue, signatureAlgorithm } = this.asn;\n\n return {\n value: signatureValue,\n algorithm: signatureAlgorithm.algorithm,\n };\n }\n\n public parseExtensions() {\n const { acinfo } = this.asn;\n\n if (acinfo.extensions) {\n this.extensions = acinfo.extensions\n .map((e) => new Extension(AsnConvert.serialize(e)));\n }\n }\n\n public parseAttributes() {\n const { acinfo } = this.asn;\n\n if (acinfo.attributes) {\n this.attributes = acinfo.attributes\n .map((e) => new Attribute(AsnConvert.serialize(e)));\n }\n }\n\n public async getThumbprint(\n algorithm: string = 'SHA-1',\n ): Promise<void> {\n try {\n const thumbprint = await getCertificateThumbprint(algorithm, this.raw);\n\n if (thumbprint) {\n this.thumbprints[algorithm] = Convert.ToHex(thumbprint);\n }\n } catch (error) {\n console.error('Error thumbprint get:', error);\n }\n }\n\n public exportAsBase64() {\n return Convert.ToBase64(this.raw);\n }\n\n public exportAsHexFormatted() {\n return hexFormat(Convert.ToHex(this.raw));\n }\n\n public exportAsPemFormatted() {\n return `-----BEGIN ATTRIBUTE CERTIFICATE-----\\n${base64Format(this.exportAsBase64())}\\n-----END ATTRIBUTE CERTIFICATE-----`;\n }\n\n public get commonName(): string {\n return `attribute-certificate-${this.thumbprints['SHA-1']}`;\n }\n\n public downloadAsPEM(name?: string) {\n Download.attrCert.asPEM(\n this.exportAsPemFormatted(),\n name || this.commonName,\n );\n }\n\n public downloadAsDER(name?: string) {\n Download.attrCert.asDER(\n this.exportAsHexFormatted(),\n name || this.commonName,\n );\n }\n}\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { h, FunctionalComponent } from '@stencil/core';\nimport { Convert } from 'pvtsutils';\n\nimport type { X509AttributeCertificate } from '../../crypto';\nimport { l10n, getStringByOID } from '../../utils';\nimport { RowTitle, RowValue } from './row';\nimport { GeneralNamePart } from './extensions/general_name_part';\n\ninterface IHolderProps {\n holder: X509AttributeCertificate['holder'];\n}\n\nexport const Holder: FunctionalComponent<IHolderProps> = (props) => {\n const { holder } = props;\n\n if (!holder) {\n return null;\n }\n\n const { baseCertificateID, objectDigestInfo } = holder;\n\n return [\n <RowTitle\n value={l10n.getString('holder')}\n />,\n baseCertificateID && ([\n baseCertificateID.issuer.map((item) => (\n <GeneralNamePart\n generalName={item}\n getDNSNameLink={() => ''}\n getIPAddressLink={() => ''}\n />\n )),\n <tr>\n <td />\n <td />\n </tr>,\n <RowValue\n name={l10n.getString('serialNumber')}\n value={Convert.ToHex(baseCertificateID.serial)}\n monospace\n />,\n <tr>\n <td />\n <td />\n </tr>,\n ]),\n objectDigestInfo && ([\n <RowValue\n name={l10n.getString('digestInfo')}\n value=\"\"\n />,\n <RowValue\n name={l10n.getString('algorithm')}\n value={getStringByOID(objectDigestInfo.digestAlgorithm.algorithm)}\n />,\n <RowValue\n name={l10n.getString('value')}\n value={Convert.ToHex(objectDigestInfo.objectDigest)}\n monospace\n />,\n <RowValue\n name={l10n.getString('type')}\n value={objectDigestInfo.digestedObjectType}\n />,\n ]),\n ];\n};\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { h, FunctionalComponent } from '@stencil/core';\n\nimport type { X509AttributeCertificate } from '../../crypto';\nimport { l10n } from '../../utils';\nimport { RowTitle } from './row';\nimport { GeneralNamePart } from './extensions/general_name_part';\n\ninterface IIssuerProps {\n issuer: X509AttributeCertificate['issuer'];\n}\n\nexport const Issuer: FunctionalComponent<IIssuerProps> = (props) => {\n const { issuer } = props;\n\n if (!issuer) {\n return null;\n }\n\n return [\n <RowTitle\n value={l10n.getString('issuer')}\n />,\n issuer.map((item) => (\n <GeneralNamePart\n generalName={item}\n getDNSNameLink={() => ''}\n getIPAddressLink={() => ''}\n />\n )),\n ];\n};\n","@import '../../css/base.scss';\n\n:host {\n display: block;\n width: 100%;\n position: relative;\n min-width: 280px;\n min-height: 300px;\n word-wrap: break-word;\n word-break: break-word;\n}\n\nth, td {\n border: none;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n\n td {\n padding: var(--pv-size-base-2) var(--pv-size-base-4);\n vertical-align: top;\n\n &:first-child {\n width: 220px;\n }\n\n &:last-child {\n width: calc(100% - 220px)\n }\n\n &.monospace {\n max-width: 0;\n }\n\n &.divider {\n padding: var(--pv-size-base-2) 0;\n\n span {\n height: 1px;\n display: block;\n background-color: var(--pv-color-gray-4);\n }\n }\n }\n\n .title td {\n padding-top: var(--pv-size-base-6);\n padding-bottom: var(--pv-size-base-2);\n }\n\n table {\n border-left: 1px solid var(--pv-color-gray-5);\n }\n}\n\n.status_wrapper {\n min-height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host([data-mobile-screen-view=\"true\"]) {\n table, tr, td {\n display: block;\n }\n\n table {\n tr {\n padding: var(--pv-size-base-2) 0;\n\n &.title {\n padding-top: var(--pv-size-base-6);\n\n td {\n padding: 0 var(--pv-size-base-4);\n }\n }\n }\n\n td {\n padding: 0 var(--pv-size-base-4);\n width: 100% !important;\n max-width: 100% !important;\n\n &.divider {\n padding: 0;\n }\n }\n }\n}\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Build,\n} from '@stencil/core';\n\nimport { X509AttributeCertificate } from '../../crypto';\nimport { getDNSNameLink, getIPAddressLink, getLEILink } from '../../utils/third_party_links';\nimport {\n BasicInformation,\n Signature,\n Thumbprints,\n Extensions,\n Miscellaneous,\n Attributes,\n Holder,\n Issuer,\n} from '../certificate-details-parts';\nimport { Typography } from '../typography';\n\nexport type AttributeCertificateProp = string | X509AttributeCertificate;\n\n@Component({\n tag: 'peculiar-attribute-certificate-viewer',\n styleUrl: '../certificate-viewer/certificate-viewer.scss',\n shadow: true,\n})\nexport class AttributeCertificateViewer {\n private certificateDecoded: X509AttributeCertificate;\n\n private certificateDecodeError: Error;\n\n private mobileMediaQuery: MediaQueryList;\n\n /**\n * The certificate value for decode and show details. Use PEM or DER.\n */\n @Prop() certificate: AttributeCertificateProp;\n\n /**\n * If `true` - component will show split-button to download certificate as PEM or DER.\n */\n @Prop() download?: boolean;\n\n /**\n * Authority Key Identifier extension parent link.\n * <br />\n * **NOTE**: `{{authKeyId}}` will be replaced to value from the extension.\n * @example\n * https://censys.io/certificates?q=parsed.extensions.subject_key_id:%20{{authKeyId}}\n */\n @Prop({ reflect: true }) authKeyIdParentLink?: string;\n\n /**\n * Authority Key Identifier extension siblings link.\n * <br />\n * **NOTE**: `{{authKeyId}}` will be replaced to value from the extension.\n * @example\n * https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{authKeyId}}\n */\n @Prop({ reflect: true }) authKeyIdSiblingsLink?: string;\n\n /**\n * Subject Key Identifier extension children link.\n * <br />\n * **NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension.\n * @example\n * https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{subjectKeyId}}\n */\n @Prop({ reflect: true }) subjectKeyIdChildrenLink?: string;\n\n /**\n * Subject Key Identifier extension siblings link.\n * <br />\n * **NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension.\n * @example\n * https://some.com/{{subjectKeyId}}\n */\n @Prop({ reflect: true }) subjectKeyIdSiblingsLink?: string;\n\n /**\n * Mobile media query string to control screen view change.\n * <br />\n * **NOTE**: Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.\n * @example\n * (max-width: 900px)\n */\n @Prop({ reflect: false }) mobileMediaQueryString?: string = '(max-width: 900px)';\n\n @State() mobileScreenView: boolean = false;\n\n @State() isDecodeInProcess: boolean = true;\n\n private handleMediaQueryChange(event: MediaQueryListEvent) {\n this.mobileScreenView = event.matches;\n }\n\n componentWillLoad() {\n this.decodeCertificate(this.certificate);\n\n if (Build.isBrowser) {\n this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);\n this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));\n this.mobileScreenView = this.mobileMediaQuery.matches;\n }\n }\n\n disconnectedCallback() {\n this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));\n }\n\n private async decodeCertificate(certificate: AttributeCertificateProp) {\n this.isDecodeInProcess = true;\n\n try {\n if (certificate instanceof X509AttributeCertificate) {\n this.certificateDecoded = certificate;\n } else if (typeof certificate === 'string') {\n this.certificateDecoded = new X509AttributeCertificate(certificate);\n } else {\n return;\n }\n\n this.certificateDecoded.parseExtensions();\n this.certificateDecoded.parseAttributes();\n await this.certificateDecoded.getThumbprint('SHA-1');\n await this.certificateDecoded.getThumbprint('SHA-256');\n } catch (error) {\n this.certificateDecodeError = error;\n\n console.error('Error certificate parse:', error);\n }\n\n this.isDecodeInProcess = false;\n }\n\n /**\n * Rerun decodeCertificate if previuos value not equal current value\n */\n @Watch('certificate')\n watchCertificateAndDecode(\n newValue: AttributeCertificateProp,\n oldValue: AttributeCertificateProp,\n ) {\n if (typeof newValue === 'string' && typeof oldValue === 'string') {\n if (newValue !== oldValue) {\n this.decodeCertificate(newValue);\n }\n\n return;\n }\n\n if (\n newValue instanceof X509AttributeCertificate\n && oldValue instanceof X509AttributeCertificate\n ) {\n if (newValue.serialNumber !== oldValue.serialNumber) {\n this.decodeCertificate(newValue);\n }\n }\n }\n\n private getAuthKeyIdParentLink = (value: string) => this.authKeyIdParentLink\n ?.replace('{{authKeyId}}', value);\n\n private getAuthKeyIdSiblingsLink = (value: string) => this.authKeyIdSiblingsLink\n ?.replace('{{authKeyId}}', value);\n\n private getSubjectKeyIdChildrenLink = (value: string) => this.subjectKeyIdChildrenLink\n ?.replace('{{subjectKeyId}}', value);\n\n private getSubjectKeyIdSiblingsLink = (value: string) => this.subjectKeyIdSiblingsLink\n ?.replace('{{subjectKeyId}}', value);\n\n // eslint-disable-next-line class-methods-use-this\n private renderErrorState() {\n return (\n <div class=\"status_wrapper\">\n <Typography>\n There was an error decoding this attribute certificate.\n </Typography>\n </div>\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private renderEmptyState() {\n return (\n <div class=\"status_wrapper\">\n <Typography>\n There is no attribute certificate available.\n </Typography>\n </div>\n );\n }\n\n render() {\n if (this.certificateDecodeError) {\n return this.renderErrorState();\n }\n\n if (!this.certificateDecoded) {\n return this.renderEmptyState();\n }\n\n return (\n <Host\n data-mobile-screen-view={String(this.mobileScreenView)}\n >\n <table>\n <BasicInformation\n {...this.certificateDecoded}\n />\n\n <Issuer\n issuer={this.certificateDecoded.issuer}\n />\n\n <Holder\n holder={this.certificateDecoded.holder}\n />\n\n <Signature\n signature={this.certificateDecoded.signature}\n />\n\n <Thumbprints\n thumbprints={this.certificateDecoded.thumbprints}\n />\n\n <Attributes\n attributes={this.certificateDecoded.attributes}\n getLEILink={getLEILink}\n getDNSNameLink={getDNSNameLink}\n getIPAddressLink={getIPAddressLink}\n getAuthKeyIdParentLink={this.getAuthKeyIdParentLink}\n getAuthKeyIdSiblingsLink={this.getAuthKeyIdSiblingsLink}\n getSubjectKeyIdChildrenLink={this.getSubjectKeyIdChildrenLink}\n getSubjectKeyIdSiblingsLink={this.getSubjectKeyIdSiblingsLink}\n />\n\n <Extensions\n extensions={this.certificateDecoded.extensions}\n getLEILink={getLEILink}\n getDNSNameLink={getDNSNameLink}\n getIPAddressLink={getIPAddressLink}\n getAuthKeyIdParentLink={this.getAuthKeyIdParentLink}\n getAuthKeyIdSiblingsLink={this.getAuthKeyIdSiblingsLink}\n getSubjectKeyIdChildrenLink={this.getSubjectKeyIdChildrenLink}\n getSubjectKeyIdSiblingsLink={this.getSubjectKeyIdSiblingsLink}\n />\n\n {this.download && (\n <Miscellaneous\n certificate={this.certificateDecoded}\n />\n )}\n </table>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/button-menu.js ADDED Viewed

@@ -0,0 +1,64 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { B as Button, T as Typography } from './button.js';
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const ActionsIcon = (props) => {
+  const { color = 'gray-10' } = props;
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" },
+    h("path", { fill: `var(--pv-color-${color})`, d: "M15 13.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" })));
+};
+const buttonMenuCss = ".sc-peculiar-button-menu-h{display:-ms-inline-flexbox;display:inline-flex;position:relative}.is_shown.sc-peculiar-button-menu-h .button_popover.sc-peculiar-button-menu:before{position:fixed;width:100%;height:100%;top:0;left:0;content:\"\"}.is_shown.sc-peculiar-button-menu-h .popover.sc-peculiar-button-menu{display:block}.popover.sc-peculiar-button-menu{min-width:200px;position:absolute;top:100%;right:0;border-radius:4px;z-index:1;-webkit-box-shadow:var(--pv-shadow-light-medium);box-shadow:var(--pv-shadow-light-medium);background:var(--pv-color-white);padding:var(--pv-size-base-2) 0;margin:var(--pv-size-base) 0;display:none}.button_option.sc-peculiar-button-menu{width:100%;-ms-flex-pack:start;justify-content:flex-start;border-radius:0}.group.sc-peculiar-button-menu:not(:last-child){border-bottom:1px solid var(--pv-color-gray-5);padding-bottom:var(--pv-size-base-2);margin-bottom:var(--pv-size-base)}.group_title.sc-peculiar-button-menu{line-height:var(--pv-size-base-6);padding:0 var(--pv-size-base-2)}";
+const ButtonMenu = /*@__PURE__*/ proxyCustomElement(class ButtonMenu extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.handleClick = () => {
+      this.open = !this.open;
+    };
+    this.groups = [];
+    this.open = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        is_shown: this.open,
+      } }, h(Button, { class: "button_popover", onClick: this.handleClick, startIcon: h(ActionsIcon, null) }), h("div", { role: "dialog", tabIndex: -1, class: "popover", "aria-hidden": String(this.open) }, this.groups.map((group) => (h("div", { class: "group" }, h(Typography, { variant: "c2", color: "gray-9", class: "group_title" }, group.title), group.options.map((option) => (h(Button, { class: "button_option", startIcon: option.startIcon, href: option.href, onClick: (event) => {
+        event.stopPropagation();
+        this.handleClick();
+        if (option.onClick) {
+          option.onClick(event);
+        }
+      } }, option.text)))))))));
+  }
+  static get style() { return buttonMenuCss; }
+}, [2, "peculiar-button-menu", {
+    "groups": [16],
+    "open": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["peculiar-button-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "peculiar-button-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ButtonMenu);
+      }
+      break;
+  } });
+}
+export { ButtonMenu as B, defineCustomElement as d };
+//# sourceMappingURL=button-menu.js.map

package/components/button-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"button-menu.js","mappings":";;;;;;AAAA;;;;;;;AAWO,MAAM,WAAW,GAA+C,CAAC,KAAK;EAC3E,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;EAEpC,QACE,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM;IAEX,YACE,IAAI,EAAE,kBAAkB,KAAK,GAAG,EAChC,CAAC,EAAC,2GAA2G,GAC7G,CACE,EACN;AACJ,CAAC;;AC3BD,MAAM,aAAa,GAAG,u/BAAu/B;;MCiChgC,UAAU;;;;IAKrB,gBAAW,GAAG;MACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB,CAAC;kBANkC,EAAE;gBAEb,KAAK;;EAM9B,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,IAED,EAAC,MAAM,IACL,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,EAAC,WAAW,OAAG,GAC1B,EACF,WACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,SAAS,iBACF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,MACrB,WAAK,KAAK,EAAC,OAAO,IAChB,EAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,aAAa,IAElB,KAAK,CAAC,KAAK,CACD,EACZ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACxB,EAAC,MAAM,IACL,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,OAAO,EAAE,CAAC,KAAK;QACb,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,MAAM,CAAC,OAAO,EAAE;UAClB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACvB;OACF,IAEA,MAAM,CAAC,IAAI,CACL,CACV,CAAC,CACE,CACP,CAAC,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icons/actions.tsx","src/components/button-menu/button-menu.scss?tag=peculiar-button-menu&encapsulation=scoped","src/components/button-menu/button-menu.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h } from '@stencil/core';\nimport type { ColorType } from '../../interface';\n\nexport const ActionsIcon: FunctionalComponent<{ color?: ColorType }> = (props) => {\n const { color = 'gray-10' } = props;\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"31\"\n fill=\"none\"\n >\n <path\n fill={`var(--pv-color-${color})`}\n d=\"M15 13.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z\"\n />\n </svg>\n );\n};\n",":host {\n display: inline-flex;\n position: relative;\n\n &.is_shown {\n .button_popover {\n &:before {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n content: '';\n }\n }\n\n .popover {\n display: block;\n }\n }\n}\n\n.popover {\n min-width: 200px;\n position: absolute;\n top: 100%;\n right: 0;\n border-radius: 4px;\n z-index: 1;\n box-shadow: var(--pv-shadow-light-medium);\n background: var(--pv-color-white);\n padding: var(--pv-size-base-2) 0;\n margin: var(--pv-size-base) 0;\n display: none;\n}\n\n.button_option {\n width: 100%;\n justify-content: flex-start;\n border-radius: 0;\n}\n\n.group {\n &:not(:last-child) {\n border-bottom: 1px solid var(--pv-color-gray-5);\n padding-bottom: var(--pv-size-base-2);\n margin-bottom: var(--pv-size-base);\n }\n}\n\n.group_title {\n line-height: var(--pv-size-base-6);\n padding: 0 var(--pv-size-base-2);\n}\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n h,\n State,\n Prop,\n Host,\n} from '@stencil/core';\nimport { Button, ButtonProps } from '../button';\nimport { Typography } from '../typography';\nimport { ActionsIcon } from '../icons';\n\nexport interface ButtonMenuGroupOptions extends ButtonProps {\n text: string | string[];\n}\n\nexport interface ButtonMenuGroup {\n title: string | string[];\n options: ButtonMenuGroupOptions[];\n}\n\n@Component({\n tag: 'peculiar-button-menu',\n styleUrl: 'button-menu.scss',\n scoped: true,\n})\nexport class ButtonMenu {\n @Prop() groups: ButtonMenuGroup[] = [];\n\n @State() open: boolean = false;\n\n handleClick = () => {\n this.open = !this.open;\n };\n\n render() {\n return (\n <Host\n class={{\n is_shown: this.open,\n }}\n >\n <Button\n class=\"button_popover\"\n onClick={this.handleClick}\n startIcon={<ActionsIcon />}\n />\n <div\n role=\"dialog\"\n tabIndex={-1}\n class=\"popover\"\n aria-hidden={String(this.open)}\n >\n {this.groups.map((group) => (\n <div class=\"group\">\n <Typography\n variant=\"c2\"\n color=\"gray-9\"\n class=\"group_title\"\n >\n {group.title}\n </Typography>\n {group.options.map((option) => (\n <Button\n class=\"button_option\"\n startIcon={option.startIcon}\n href={option.href}\n onClick={(event) => {\n event.stopPropagation();\n\n this.handleClick();\n\n if (option.onClick) {\n option.onClick(event);\n }\n }}\n >\n {option.text}\n </Button>\n ))}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}