@peculiar/certificates-viewer 4.3.1 → 4.4.0

package/components/peculiar-attribute-certificate-viewer.js

@@ -7,5 +7,6 @@ const PeculiarAttributeCertificateViewer = AttributeCertificateViewer;
 const defineCustomElement = defineCustomElement$1;
 
 export { PeculiarAttributeCertificateViewer, defineCustomElement };
+//# sourceMappingURL=peculiar-attribute-certificate-viewer.js.map
 
 //# sourceMappingURL=peculiar-attribute-certificate-viewer.js.map

package/components/peculiar-button-menu.js

@@ -7,5 +7,6 @@ const PeculiarButtonMenu = ButtonMenu;
 const defineCustomElement = defineCustomElement$1;
 
 export { PeculiarButtonMenu, defineCustomElement };
+//# sourceMappingURL=peculiar-button-menu.js.map
 
 //# sourceMappingURL=peculiar-button-menu.js.map

package/components/peculiar-certificate-chain-viewer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PeculiarCertificateChainViewer extends Components.PeculiarCertificateChainViewer, HTMLElement {}
+export const PeculiarCertificateChainViewer: {
+    prototype: PeculiarCertificateChainViewer;
+    new (): PeculiarCertificateChainViewer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/peculiar-certificate-chain-viewer.js

@@ -0,0 +1,12 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { C as CertificateChainViewer, d as defineCustomElement$1 } from './certificate-chain-viewer.js';
+
+const PeculiarCertificateChainViewer = CertificateChainViewer;
+const defineCustomElement = defineCustomElement$1;
+
+export { PeculiarCertificateChainViewer, defineCustomElement };
+//# sourceMappingURL=peculiar-certificate-chain-viewer.js.map
+
+//# sourceMappingURL=peculiar-certificate-chain-viewer.js.map

package/components/peculiar-certificate-chain-viewer.js.map

@@ -0,0 +1 @@
+{"file":"peculiar-certificate-chain-viewer.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/peculiar-certificate-decoder.js

@@ -3,16 +3,78 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as readAsBinaryString } from './read_file.js';
-import './download.js';
+import { P as PemConverter, f as buildExports, a3 as SignedData, a4 as EncapsulatedContent, a5 as OctetString, a6 as CertificateSet, a7 as CertificateChoices, b as AsnConvert, K as Certificate, a8 as ContentInfo, D as Download } from './download.js';
 import { X as X509Certificate, d as defineCustomElement$4 } from './certificate-viewer.js';
-import { X as X509AttributeCertificate, d as defineCustomElement$5 } from './attribute-certificate-viewer.js';
+import { X as X509AttributeCertificate, d as defineCustomElement$6 } from './attribute-certificate-viewer.js';
 import { P as Pkcs10CertificateRequest } from './pkcs10_certificate_request.js';
 import { X as X509Crl, d as defineCustomElement$3 } from './crl-viewer.js';
 import { T as Typography, B as Button } from './button.js';
+import { d as defineCustomElement$5 } from './certificate-chain-viewer.js';
 import { d as defineCustomElement$2 } from './csr-viewer.js';
 
-const certificateDecoderCss = "*{-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%}.textarea{min-height:300px;width:100%;border-radius:4px;border:1px solid var(--pv-color-gray-5);padding:14px;font-family:monospace;resize:vertical}.viewer{margin-top:var(--pv-size-base-12)}.controls{margin-top:var(--pv-size-base-2);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-2)}.control_row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--pv-size-base)}";
-const PeculiarCertificateDecoderStyle0 = certificateDecoderCss;
+const id_data = "1.2.840.113549.1.7.1";
+const id_signedData = "1.2.840.113549.1.7.2";
+
+class X509Certificates extends Array {
+    constructor(raw) {
+        super();
+        const rawItems = PemConverter.isPem(raw)
+            ? PemConverter.decode(raw).map((value) => buildExports.Convert.ToBase64Url(value))
+            : raw.split(',');
+        if (rawItems.length < 2) {
+            throw new Error('Unable to parse string. The array of elements is less than 2');
+        }
+        // eslint-disable-next-line no-restricted-syntax
+        for (const item of rawItems) {
+            this.push(new X509Certificate(item));
+        }
+    }
+    get commonName() {
+        return Array.from(this)
+            .map((o) => o.commonName)
+            .join('_');
+    }
+    get raw() {
+        const signedData = new SignedData();
+        signedData.version = 1;
+        signedData.encapContentInfo.eContentType = id_data;
+        signedData.encapContentInfo.eContent = new EncapsulatedContent({
+            single: new OctetString(),
+        });
+        signedData.certificates = new CertificateSet(Array.from(this).map((o) => new CertificateChoices({
+            certificate: AsnConvert.parse(o.raw, Certificate),
+        })));
+        const cms = new ContentInfo({
+            contentType: id_signedData,
+            content: AsnConvert.serialize(signedData),
+        });
+        return AsnConvert.serialize(cms);
+    }
+    toString(format = 'pem') {
+        switch (format) {
+            case 'pem':
+                return Array.from(this)
+                    .map((o) => o.toString('pem'))
+                    .join('\n');
+            case 'base64url':
+                return Array.from(this)
+                    .map((o) => o.toString('base64url'))
+                    .join(',');
+            default:
+                return Array.from(this)
+                    .map((o) => o.toString('base64'))
+                    .join(',');
+        }
+    }
+    downloadAsPEM(name) {
+        Download.cert.asPEM(this.toString('pem'), name || this.commonName);
+    }
+    downloadAsDER(name) {
+        Download.cert.asDER(this.raw, name || this.commonName);
+    }
+}
+
+const certificateDecoderCss = "*{-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%}.textarea{min-height:300px;width:100%;border-radius:4px;border:1px solid var(--pv-color-gray-5);padding:14px;font-family:monospace;resize:vertical}.controls{margin-top:var(--pv-size-base-2);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-2);margin-bottom:var(--pv-size-base-12)}.control_row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--pv-size-base)}";
 
 const CertificateDecoder = /*@__PURE__*/ proxyCustomElement(class CertificateDecoder extends HTMLElement {
     constructor() {
@@ -59,16 +121,13 @@ const CertificateDecoder = /*@__PURE__*/ proxyCustomElement(class CertificateDec
                 }
             }
         };
-        this.certificateExamples = undefined;
-        this.defaultCertificate = undefined;
-        this.certificateDecoded = undefined;
     }
     componentDidLoad() {
-        if (this.defaultCertificate) {
+        if (this.certificateToDecode) {
             /**
              * Prevent Stencil warning about re-render
              */
-            setTimeout(() => this.decode(this.defaultCertificate), 100);
+            setTimeout(() => this.decode(this.certificateToDecode), 100);
         }
     }
     clearValue() {
@@ -79,37 +138,55 @@ const CertificateDecoder = /*@__PURE__*/ proxyCustomElement(class CertificateDec
     setValue(value) {
         this.certificateDecoded = value;
         this.inputPaste.value = value.toString('pem');
-        this.successParse.emit(value.toString('base64'));
+        this.successParse.emit(value.toString('base64url'));
     }
-    decode(certificate) {
+    decode(value) {
         new Promise((resolve) => {
-            resolve(new X509Certificate(certificate));
+            resolve(new X509Certificates(value));
         })
-            .catch(() => new X509AttributeCertificate(certificate))
-            .catch(() => new Pkcs10CertificateRequest(certificate))
-            .catch(() => new X509Crl(certificate))
+            .catch(() => new X509Certificate(value))
+            .catch(() => new X509AttributeCertificate(value))
+            .catch(() => new Pkcs10CertificateRequest(value))
+            .catch(() => new X509Crl(value))
             .then((res) => this.setValue(res))
-            .catch((err) => {
-            this.clearValue();
-            console.log(err);
-            alert('Error decoding file. Please try to use Certificate/AttributeCertificate/CertificateRequest/CRL.');
+            .catch((error) => {
+            console.log(error);
+            alert(`Error decoding certificate:\n"${value}"\n\nPlease try to use Certificate/AttributeCertificate/CertificateRequest/CRL.`);
         });
     }
+    renderCertificate() {
+        if (this.certificateDecoded instanceof X509Certificates) {
+            return (h("peculiar-certificate-chain-viewer", { certificates: this.certificateDecoded, download: true }));
+        }
+        if (this.certificateDecoded instanceof X509Certificate) {
+            return (h("peculiar-certificate-viewer", { certificate: this.certificateDecoded, download: true }));
+        }
+        if (this.certificateDecoded instanceof X509AttributeCertificate) {
+            return (h("peculiar-attribute-certificate-viewer", { certificate: this.certificateDecoded, download: true }));
+        }
+        if (this.certificateDecoded instanceof Pkcs10CertificateRequest) {
+            return (h("peculiar-csr-viewer", { certificate: this.certificateDecoded, download: true }));
+        }
+        if (this.certificateDecoded instanceof X509Crl) {
+            return (h("peculiar-crl-viewer", { certificate: this.certificateDecoded, download: true }));
+        }
+        return null;
+    }
     render() {
         var _a;
-        return (h(Host, { key: '7c3bfca68882e39705e9640f76754cce2e5d6c6a' }, h("textarea", { key: '4d24f4b914f7f118efde2144e7597e0767d59ce8', placeholder: "Certificate DER or PEM", class: "textarea t-b2 c-black", ref: (el) => { this.inputPaste = el; }, onDrop: this.handleDropFile }), h("div", { key: '06ba6e2b5658225a585ec9711e6f3f945ef3a840', class: "controls" }, h("div", { key: 'df2e115ea04d4eae7985f6ee57bfe47354f50240', class: "control_row" }, h(Typography, { key: '05c30b2956055455cdb1f52b40995752dd0d7da4', variant: "b3", color: "secondary-tint-2" }, "Drag or load file:"), h("input", { key: 'cca59d7c59d9917e728f9795bcfbd546d4cf75b8', type: "file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl", onChange: this.handleChangeInputFile, value: "" })), ((_a = this.certificateExamples) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { class: "control_row" }, h(Typography, { variant: "b3", color: "secondary-tint-2" }, "Load examples:"), h("select", { onChange: this.handleChangeExample }, h("option", { value: "" }, "None"), this.certificateExamples.map((example) => (h("option", { value: example.value }, example.title)))))), h("div", { key: '6d1f010e03d7836459214e5c0abe1af7fbbe2a10', class: "control_row" }, h(Button, { key: '4038db36b62ff11f592f380f5c98bebb0014585e', onClick: this.handleClickDecode }, "Decode"), h(Button, { key: 'fb7c30e61b10194b5f02a2cefa06191904f5ce46', onClick: this.handleClickClear }, "Clear"))), this.certificateDecoded instanceof X509Certificate && (h("peculiar-certificate-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true })), this.certificateDecoded instanceof X509AttributeCertificate && (h("peculiar-attribute-certificate-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true })), this.certificateDecoded instanceof Pkcs10CertificateRequest && (h("peculiar-csr-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true })), this.certificateDecoded instanceof X509Crl && (h("peculiar-crl-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true }))));
+        return (h(Host, { key: '466ae73c347d305938c8b5f7a9ca0fcc8ec000eb' }, h("textarea", { key: '00d3552d847823c1e4e10162c5ac22de48062c47', placeholder: "Certificate DER or PEM", class: "textarea t-b2 c-black", ref: (el) => { this.inputPaste = el; }, onDrop: this.handleDropFile }), h("div", { key: '2b45a534e3db2d4c879efcc849f439d494ad5adc', class: "controls" }, h("div", { key: 'c78db2ec219c7417c10c8aa4b99e72e1fc16499d', class: "control_row" }, h(Typography, { key: '9e72c34b567870083b68fdaf082aae28f8899b24', variant: "b3", color: "secondary-tint-2" }, "Drag or load file:"), h("input", { key: '7069e5db2f0de85126b4fdcace19e181ab407a16', type: "file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl", onChange: this.handleChangeInputFile, value: "" })), ((_a = this.certificateExamples) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { key: 'e184a0864d8432e1f0aa26788e58f3c336abc598', class: "control_row" }, h(Typography, { key: '19e3213a14ef0b24bb110df7a4e943bf1f2a8ebf', variant: "b3", color: "secondary-tint-2" }, "Load examples:"), h("select", { key: '79082619d5d4bc82cf90afddf58ec58a5ae232b7', onChange: this.handleChangeExample }, h("option", { key: 'add23975d376914239389b621bd956bcd4fb52eb', value: "" }, "None"), this.certificateExamples.map((example) => (h("option", { value: example.value }, example.title)))))), h("div", { key: '876ccefd3125618d5c1e7c83e277349fa78da802', class: "control_row" }, h(Button, { key: 'bb890810c0895ba3fdcc22695e72cd8c2cf9645d', onClick: this.handleClickDecode }, "Decode"), h(Button, { key: 'dadc94b3e9e2e7211d993d99c127abfc8e593545', onClick: this.handleClickClear }, "Clear"))), this.renderCertificate()));
     }
-    static get style() { return PeculiarCertificateDecoderStyle0; }
+    static get style() { return certificateDecoderCss; }
 }, [1, "peculiar-certificate-decoder", {
         "certificateExamples": [16],
-        "defaultCertificate": [1, "default-certificate"],
+        "certificateToDecode": [1, "certificate-to-decode"],
         "certificateDecoded": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["peculiar-certificate-decoder", "peculiar-attribute-certificate-viewer", "peculiar-certificate-viewer", "peculiar-crl-viewer", "peculiar-csr-viewer"];
+    const components = ["peculiar-certificate-decoder", "peculiar-attribute-certificate-viewer", "peculiar-certificate-chain-viewer", "peculiar-certificate-viewer", "peculiar-crl-viewer", "peculiar-csr-viewer"];
     components.forEach(tagName => { switch (tagName) {
         case "peculiar-certificate-decoder":
             if (!customElements.get(tagName)) {
@@ -117,6 +194,11 @@ function defineCustomElement$1() {
             }
             break;
         case "peculiar-attribute-certificate-viewer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "peculiar-certificate-chain-viewer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
@@ -143,5 +225,6 @@ const PeculiarCertificateDecoder = CertificateDecoder;
 const defineCustomElement = defineCustomElement$1;
 
 export { PeculiarCertificateDecoder, defineCustomElement };
+//# sourceMappingURL=peculiar-certificate-decoder.js.map
 
 //# sourceMappingURL=peculiar-certificate-decoder.js.map

package/components/peculiar-certificate-decoder.js.map

@@ -1 +1 @@
-{"file":"peculiar-certificate-decoder.js","mappings":"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","names":[],"sources":["src/components/certificate-decoder/certificate-decoder.scss?tag=peculiar-certificate-decoder&encapsulation=shadow","src/components/certificate-decoder/certificate-decoder.tsx"],"sourcesContent":["@import '../../css/base.scss';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.textarea {\n  min-height: 300px;\n  width: 100%;\n  border-radius: 4px;\n  border: 1px solid var(--pv-color-gray-5);;\n  padding: 14px;\n  font-family: monospace;\n  resize: vertical;\n}\n\n.viewer {\n  margin-top: var(--pv-size-base-12);\n}\n\n.controls {\n  margin-top: var(--pv-size-base-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--pv-size-base-2);\n}\n\n.control_row {\n  display: flex;\n  align-items: center;\n  gap: var(--pv-size-base);\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  State,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nimport { readAsBinaryString } from '../../utils';\nimport {\n  X509Certificate,\n  X509AttributeCertificate,\n  Pkcs10CertificateRequest,\n  X509Crl,\n} from '../../crypto';\nimport { Button } from '../button';\nimport { Typography } from '../typography';\n\n@Component({\n  tag: 'peculiar-certificate-decoder',\n  styleUrl: 'certificate-decoder.scss',\n  shadow: true,\n})\nexport class CertificateDecoder {\n  private inputPaste?: HTMLTextAreaElement;\n\n  /**\n   * The example certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() certificateExamples?: {\n    title: string;\n    value: string;\n  }[];\n\n  /**\n   * The default certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() defaultCertificate?: string;\n\n  @State() certificateDecoded: X509Certificate\n  | X509AttributeCertificate\n  | Pkcs10CertificateRequest\n  | X509Crl;\n\n  /**\n   * Emitted when the certificate has been successfully parsed.\n   */\n  @Event() successParse!: EventEmitter<string>;\n\n  /**\n   * Emitted when the certificate has been removed.\n   */\n  @Event() clearCertificate!: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.defaultCertificate) {\n      /**\n       * Prevent Stencil warning about re-render\n       */\n      setTimeout(() => this.decode(this.defaultCertificate), 100);\n    }\n  }\n\n  private handleClickDecode = () => {\n    const { value } = this.inputPaste;\n\n    if (value) {\n      this.decode(value);\n    }\n  };\n\n  private handleClickClear = () => {\n    this.clearValue();\n  };\n\n  private handleChangeInputFile = async (event: any) => {\n    const element = event.target;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n\n      element.value = '';\n    }\n  };\n\n  private handleChangeExample = (event: any) => {\n    if (event.target.value) {\n      this.decode(event.target.value);\n    } else {\n      this.clearValue();\n    }\n  };\n\n  private handleDropFile = async (event: any) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const element = event.dataTransfer;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n    }\n  };\n\n  clearValue() {\n    this.inputPaste.value = '';\n    this.certificateDecoded = null;\n    this.clearCertificate.emit();\n  }\n\n  setValue(value: typeof this.certificateDecoded) {\n    this.certificateDecoded = value;\n    this.inputPaste.value = value.toString('pem');\n    this.successParse.emit(value.toString('base64'));\n  }\n\n  decode(certificate: string) {\n    new Promise((resolve) => {\n      resolve(new X509Certificate(certificate));\n    })\n      .catch(() => new X509AttributeCertificate(certificate))\n      .catch(() => new Pkcs10CertificateRequest(certificate))\n      .catch(() => new X509Crl(certificate))\n      .then((res: typeof this.certificateDecoded) => this.setValue(res))\n      .catch((err) => {\n        this.clearValue();\n\n        console.log(err);\n        alert('Error decoding file. Please try to use Certificate/AttributeCertificate/CertificateRequest/CRL.');\n      });\n  }\n\n  render() {\n    return (\n      <Host>\n        <textarea\n          placeholder=\"Certificate DER or PEM\"\n          class=\"textarea t-b2 c-black\"\n          ref={(el) => { this.inputPaste = el; }}\n          onDrop={this.handleDropFile}\n        />\n        <div class=\"controls\">\n          <div class=\"control_row\">\n            <Typography\n              variant=\"b3\"\n              color=\"secondary-tint-2\"\n            >\n              Drag or load file:\n            </Typography>\n            <input\n              type=\"file\"\n              accept=\"application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl\"\n              onChange={this.handleChangeInputFile}\n              value=\"\"\n            />\n          </div>\n          {this.certificateExamples?.length && (\n            <div class=\"control_row\">\n              <Typography\n                variant=\"b3\"\n                color=\"secondary-tint-2\"\n              >\n                Load examples:\n              </Typography>\n              <select onChange={this.handleChangeExample}>\n                <option value=\"\">None</option>\n                {this.certificateExamples.map((example) => (\n                  <option value={example.value}>\n                    {example.title}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n          <div class=\"control_row\">\n            <Button\n              onClick={this.handleClickDecode}\n            >\n              Decode\n            </Button>\n            <Button\n              onClick={this.handleClickClear}\n            >\n              Clear\n            </Button>\n          </div>\n        </div>\n        {this.certificateDecoded instanceof X509Certificate && (\n          <peculiar-certificate-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof X509AttributeCertificate && (\n          <peculiar-attribute-certificate-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof Pkcs10CertificateRequest && (\n          <peculiar-csr-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof X509Crl && (\n          <peculiar-crl-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"peculiar-certificate-decoder.js","mappings":"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","names":["Convert","__stencil_proxyCustomElement"],"sources":["../../node_modules/@peculiar/asn1-cms/build/es2015/object_identifiers.js","src/crypto/x509_certificates.ts","src/components/certificate-decoder/certificate-decoder.scss?tag=peculiar-certificate-decoder&encapsulation=shadow","src/components/certificate-decoder/certificate-decoder.tsx"],"sourcesContent":["export const id_ct_contentInfo = \"1.2.840.113549.1.9.16.1.6\";\nexport const id_data = \"1.2.840.113549.1.7.1\";\nexport const id_signedData = \"1.2.840.113549.1.7.2\";\nexport const id_envelopedData = \"1.2.840.113549.1.7.3\";\nexport const id_digestedData = \"1.2.840.113549.1.7.5\";\nexport const id_encryptedData = \"1.2.840.113549.1.7.6\";\nexport const id_authData = \"1.2.840.113549.1.9.16.1.2\";\n","import { Convert } from 'pvtsutils';\nimport {\n  SignedData,\n  id_data,\n  EncapsulatedContent,\n  CertificateSet,\n  CertificateChoices,\n  ContentInfo,\n  id_signedData,\n} from '@peculiar/asn1-cms';\nimport { Certificate } from '@peculiar/asn1-x509';\nimport { AsnConvert, OctetString } from '@peculiar/asn1-schema';\n\nimport { Download } from '../utils';\n\nimport { PemConverter } from './pem_converter';\nimport { X509Certificate } from './x509_certificate';\n\nexport class X509Certificates extends Array<X509Certificate> {\n  constructor(raw: string) {\n    super();\n\n    const rawItems = PemConverter.isPem(raw)\n      ? PemConverter.decode(raw).map((value) => Convert.ToBase64Url(value))\n      : raw.split(',');\n\n    if (rawItems.length < 2) {\n      throw new Error('Unable to parse string. The array of elements is less than 2');\n    }\n\n    // eslint-disable-next-line no-restricted-syntax\n    for (const item of rawItems) {\n      this.push(new X509Certificate(item));\n    }\n  }\n\n  public get commonName(): string {\n    return Array.from(this)\n      .map((o) => o.commonName)\n      .join('_');\n  }\n\n  public get raw(): ArrayBuffer {\n    const signedData = new SignedData();\n\n    signedData.version = 1;\n    signedData.encapContentInfo.eContentType = id_data;\n    signedData.encapContentInfo.eContent = new EncapsulatedContent({\n      single: new OctetString(),\n    });\n    signedData.certificates = new CertificateSet(\n      Array.from(this).map((o) => new CertificateChoices({\n        certificate: AsnConvert.parse(o.raw, Certificate),\n      })),\n    );\n\n    const cms = new ContentInfo({\n      contentType: id_signedData,\n      content: AsnConvert.serialize(signedData),\n    });\n\n    return AsnConvert.serialize(cms);\n  }\n\n  public toString(format: 'pem' | 'base64' | 'base64url' = 'pem'): string {\n    switch (format) {\n      case 'pem':\n        return Array.from(this)\n          .map((o) => o.toString('pem'))\n          .join('\\n');\n      case 'base64url':\n        return Array.from(this)\n          .map((o) => o.toString('base64url'))\n          .join(',');\n      default:\n        return Array.from(this)\n          .map((o) => o.toString('base64'))\n          .join(',');\n    }\n  }\n\n  public downloadAsPEM(name?: string) {\n    Download.cert.asPEM(\n      this.toString('pem'),\n      name || this.commonName,\n    );\n  }\n\n  public downloadAsDER(name?: string) {\n    Download.cert.asDER(\n      this.raw,\n      name || this.commonName,\n    );\n  }\n}\n","@import '../../css/base.scss';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.textarea {\n  min-height: 300px;\n  width: 100%;\n  border-radius: 4px;\n  border: 1px solid var(--pv-color-gray-5);;\n  padding: 14px;\n  font-family: monospace;\n  resize: vertical;\n}\n\n.controls {\n  margin-top: var(--pv-size-base-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--pv-size-base-2);\n  margin-bottom: var(--pv-size-base-12);\n}\n\n.control_row {\n  display: flex;\n  align-items: center;\n  gap: var(--pv-size-base);\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  State,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nimport { readAsBinaryString } from '../../utils';\nimport {\n  X509Certificate,\n  X509AttributeCertificate,\n  Pkcs10CertificateRequest,\n  X509Crl,\n  X509Certificates,\n} from '../../crypto';\nimport { Button } from '../button';\nimport { Typography } from '../typography';\n\n@Component({\n  tag: 'peculiar-certificate-decoder',\n  styleUrl: 'certificate-decoder.scss',\n  shadow: true,\n})\nexport class CertificateDecoder {\n  private inputPaste?: HTMLTextAreaElement;\n\n  /**\n   * The example certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() certificateExamples?: {\n    title: string;\n    value: string;\n  }[];\n\n  /**\n   * The default certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() certificateToDecode?: string;\n\n  @State() certificateDecoded: X509Certificates\n  | X509Certificate\n  | X509AttributeCertificate\n  | Pkcs10CertificateRequest\n  | X509Crl;\n\n  /**\n   * Emitted when the certificate has been successfully parsed.\n   */\n  @Event() successParse!: EventEmitter<string>;\n\n  /**\n   * Emitted when the certificate has been removed.\n   */\n  @Event() clearCertificate!: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.certificateToDecode) {\n      /**\n       * Prevent Stencil warning about re-render\n       */\n      setTimeout(() => this.decode(this.certificateToDecode), 100);\n    }\n  }\n\n  private handleClickDecode = () => {\n    const { value } = this.inputPaste;\n\n    if (value) {\n      this.decode(value);\n    }\n  };\n\n  private handleClickClear = () => {\n    this.clearValue();\n  };\n\n  private handleChangeInputFile = async (event: any) => {\n    const element = event.target;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n\n      element.value = '';\n    }\n  };\n\n  private handleChangeExample = (event: any) => {\n    if (event.target.value) {\n      this.decode(event.target.value);\n    } else {\n      this.clearValue();\n    }\n  };\n\n  private handleDropFile = async (event: any) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const element = event.dataTransfer;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n    }\n  };\n\n  clearValue() {\n    this.inputPaste.value = '';\n    this.certificateDecoded = null;\n    this.clearCertificate.emit();\n  }\n\n  setValue(value: typeof this.certificateDecoded) {\n    this.certificateDecoded = value;\n    this.inputPaste.value = value.toString('pem');\n    this.successParse.emit(value.toString('base64url'));\n  }\n\n  decode(value: string) {\n    new Promise<X509Certificates>((resolve) => {\n      resolve(new X509Certificates(value));\n    })\n      .catch(() => new X509Certificate(value))\n      .catch(() => new X509AttributeCertificate(value))\n      .catch(() => new Pkcs10CertificateRequest(value))\n      .catch(() => new X509Crl(value))\n      .then((res: typeof this.certificateDecoded) => this.setValue(res))\n      .catch((error) => {\n        console.log(error);\n\n        alert(`Error decoding certificate:\\n\"${value}\"\\n\\nPlease try to use Certificate/AttributeCertificate/CertificateRequest/CRL.`);\n      });\n  }\n\n  renderCertificate() {\n    if (this.certificateDecoded instanceof X509Certificates) {\n      return (\n        <peculiar-certificate-chain-viewer\n          certificates={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Certificate) {\n      return (\n        <peculiar-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509AttributeCertificate) {\n      return (\n        <peculiar-attribute-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof Pkcs10CertificateRequest) {\n      return (\n        <peculiar-csr-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Crl) {\n      return (\n        <peculiar-crl-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    return null;\n  }\n\n  render() {\n    return (\n      <Host>\n        <textarea\n          placeholder=\"Certificate DER or PEM\"\n          class=\"textarea t-b2 c-black\"\n          ref={(el) => { this.inputPaste = el; }}\n          onDrop={this.handleDropFile}\n        />\n        <div class=\"controls\">\n          <div class=\"control_row\">\n            <Typography\n              variant=\"b3\"\n              color=\"secondary-tint-2\"\n            >\n              Drag or load file:\n            </Typography>\n            <input\n              type=\"file\"\n              accept=\"application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl\"\n              onChange={this.handleChangeInputFile}\n              value=\"\"\n            />\n          </div>\n          {this.certificateExamples?.length && (\n            <div class=\"control_row\">\n              <Typography\n                variant=\"b3\"\n                color=\"secondary-tint-2\"\n              >\n                Load examples:\n              </Typography>\n              <select onChange={this.handleChangeExample}>\n                <option value=\"\">None</option>\n                {this.certificateExamples.map((example) => (\n                  <option value={example.value}>\n                    {example.title}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n          <div class=\"control_row\">\n            <Button\n              onClick={this.handleClickDecode}\n            >\n              Decode\n            </Button>\n            <Button\n              onClick={this.handleClickClear}\n            >\n              Clear\n            </Button>\n          </div>\n        </div>\n        {this.renderCertificate()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/peculiar-certificate-viewer.js

@@ -7,5 +7,6 @@ const PeculiarCertificateViewer = CertificateViewer;
 const defineCustomElement = defineCustomElement$1;
 
 export { PeculiarCertificateViewer, defineCustomElement };
+//# sourceMappingURL=peculiar-certificate-viewer.js.map
 
 //# sourceMappingURL=peculiar-certificate-viewer.js.map

package/components/peculiar-certificates-viewer.js

@@ -3,7 +3,7 @@
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { X as X509Certificate, d as defineCustomElement$4 } from './certificate-viewer.js';
-import { P as l10n, S as dateShort, a as DownloadIcon, Q as OIDs } from './download.js';
+import { l as l10n, Z as dateShort, a as DownloadIcon, _ as OIDs } from './download.js';
 import { T as Typography, B as Button } from './button.js';
 import { D as DetailsIcon, L as LinkIcon, C as CrossIcon } from './cross.js';
 import { a as ArrowTopIcon, A as ArrowBottomIcon } from './arrow_top.js';
@@ -37,7 +37,6 @@ const CertificateSummary = (props) => {
 };
 
 const certificatesViewerCss = "*{-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%;word-wrap:break-word;min-width:280px;overflow:auto;position:relative}.search_section{padding:var(--pv-size-base-4);border-bottom:1px solid var(--pv-color-gray-4)}.input_search{height:var(--pv-size-base-8);width:100%;outline:none;background-color:var(--pv-color-gray-1);padding:0 var(--pv-size-base-2);border:1px solid var(--pv-color-gray-7);border-radius:4px;-webkit-transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;transition:background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s}.input_search::-webkit-input-placeholder{color:var(--pv-color-gray-9)}.input_search::-moz-placeholder{color:var(--pv-color-gray-9)}.input_search:-ms-input-placeholder{color:var(--pv-color-gray-9)}.input_search::-ms-input-placeholder{color:var(--pv-color-gray-9)}.input_search::placeholder{color:var(--pv-color-gray-9)}table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0}table td,table th{border-bottom:1px solid var(--pv-color-gray-4);vertical-align:top;text-align:left}table td:first-child,table th:first-child{padding-right:0;width:var(--pv-size-base-10)}table td:last-child,table th:last-child{padding-left:0;width:var(--pv-size-base-10)}table th{padding:var(--pv-size-base-2) var(--pv-size-base-4)}table th.col_action{padding:0}table td{padding:var(--pv-size-base-4)}table tr.m_expanded{background:var(--pv-color-gray-1)}table tr.m_expanded>td{border-bottom:none}table tr.expanded_summary{background:var(--pv-color-gray-1)}table tr.expanded_summary table{table-layout:initial}table tr.expanded_summary table td{border-bottom:none;padding:var(--pv-size-base-2)}table tr.expanded_summary table td:first-child{width:200px}table tr.expanded_summary table td:last-child{width:auto}.button_table_cell{margin-top:-3px}.status_wrapper{text-align:center;height:var(--pv-size-base-16);vertical-align:middle}.modal_wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-animation:fadeIn 200ms;animation:fadeIn 200ms;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.modal_backdrop{background:var(--pv-color-black);z-index:-1;position:fixed;top:0;right:0;bottom:0;left:0;opacity:0.5}.modal_container{background:var(--pv-color-white);width:100%;display:-ms-flexbox;display:flex;max-height:calc(100% - 60px);-ms-flex-direction:column;flex-direction:column;margin:var(--pv-size-base-6);position:relative;outline:none;-webkit-box-shadow:var(--pv-shadow-dark-hight);box-shadow:var(--pv-shadow-dark-hight);overflow:hidden;border:0px;padding:0px;max-width:640px;border-radius:4px}.modal_header{padding:var(--pv-size-base-3) var(--pv-size-base-4);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:var(--pv-size-base-2);border-bottom:1px solid var(--pv-color-gray-5)}.modal_content{-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto}:host([data-mobile-screen-view=true]) table,:host([data-mobile-screen-view=true]) tbody,:host([data-mobile-screen-view=true]) tr,:host([data-mobile-screen-view=true]) td{display:block;width:100% !important;padding:0;border:none}:host([data-mobile-screen-view=true]) thead{display:none}:host([data-mobile-screen-view=true]) table tr{padding:var(--pv-size-base-2) 0}:host([data-mobile-screen-view=true]) table .expanded_summary{padding:0}:host([data-mobile-screen-view=true]) table .certificate_row{border-bottom:1px solid var(--pv-color-gray-5);padding:var(--pv-size-base-2) var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) table .certificate_row_actions{padding-top:var(--pv-size-base-6)}:host([data-mobile-screen-view=true]) table .certificate_row_actions td{display:-ms-flexbox;display:flex;-ms-flex-pack:right;justify-content:right;gap:var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) .button_table_cell{margin-top:0}";
-const PeculiarCertificatesViewerStyle0 = certificatesViewerCss;
 
 const CertificatesViewer = /*@__PURE__*/ proxyCustomElement(class CertificatesViewer extends HTMLElement {
     constructor() {
@@ -47,6 +46,37 @@ const CertificatesViewer = /*@__PURE__*/ proxyCustomElement(class CertificatesVi
         this.detailsOpen = createEvent(this, "detailsOpen", 7);
         this.detailsClose = createEvent(this, "detailsClose", 7);
         this.isHasRoots = false;
+        /**
+         * List of certificates values for decode and show in the list.
+         * <br />
+         * **NOTE**: If you do not provide a `name` value when
+         * invocing the component it will take the first Subject CN value.
+         * <br />
+         * **NOTE**: If you do not provide a `tests` this column will be ommited from the rendered page.
+         * <br />
+         * **NOTE**: If the supplied certificates are self-signed the issuer column will be ommited.
+         */
+        this.certificates = [];
+        /**
+         * Use filter in the list when search is changed.
+         */
+        this.filterWithSearch = true;
+        /**
+         * Use highlight chapters in the list when search is changed.
+         */
+        this.highlightWithSearch = true;
+        /**
+         * Mobile media query string to control screen view change.
+         * <br />
+         * **NOTE**: Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.
+         * @example
+         *  (max-width: 900px)
+         */
+        this.mobileMediaQueryString = '(max-width: 900px)';
+        this.mobileScreenView = false;
+        this.search = '';
+        this.certificatesDecoded = [];
+        this.isDecodeInProcess = true;
         this.handleClickDetails = (certificate) => {
             this.certificateSelectedForDetails = certificate;
             this.detailsOpen.emit(certificate);
@@ -58,16 +88,6 @@ const CertificatesViewer = /*@__PURE__*/ proxyCustomElement(class CertificatesVi
         this.handleSearch = (event) => {
             this.search = event.target.value.trim();
         };
-        this.certificates = [];
-        this.filterWithSearch = true;
-        this.highlightWithSearch = true;
-        this.mobileMediaQueryString = '(max-width: 900px)';
-        this.mobileScreenView = false;
-        this.search = '';
-        this.certificatesDecoded = [];
-        this.expandedRow = undefined;
-        this.certificateSelectedForDetails = undefined;
-        this.isDecodeInProcess = true;
     }
     handleMediaQueryChange(event) {
         this.mobileScreenView = event.matches;
@@ -282,12 +302,12 @@ const CertificatesViewer = /*@__PURE__*/ proxyCustomElement(class CertificatesVi
         return certificatesRows;
     }
     render() {
-        return (h(Host, { key: 'e10ac3070a3cb75cb9a281a999fec42ef28d593d', "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), h("table", { key: 'abc765a09c9537c36500143c6caffa688910483e' }, !this.mobileScreenView && (h("thead", null, h("tr", null, h("th", null), !this.isHasRoots && (h("th", { class: "col_issuer" }, h(Typography, { variant: "s2" }, l10n.getString('issuer')))), h("th", { class: "col_name" }, h(Typography, { variant: "s2" }, l10n.getString('name'))), h("th", { class: "col_public_key" }, h(Typography, { variant: "s2" }, l10n.getString('publicKey'))), h("th", { class: "col_fingerprint" }, h(Typography, { variant: "s2" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("th", null)))), h("tbody", { key: 'e61dfb14836909b154cdbc359c8f04bef5a42df0' }, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
+        return (h(Host, { key: 'e10ac3070a3cb75cb9a281a999fec42ef28d593d', "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), h("table", { key: 'abc765a09c9537c36500143c6caffa688910483e' }, !this.mobileScreenView && (h("thead", { key: 'c948fc3f9929deda81bfe9f1205b5c6f6032d256' }, h("tr", { key: '7deae387a944910a82588698b61d55c0ba64ff55' }, h("th", { key: '70927a2c00545a1c500e4312ed30022dc24df23a' }), !this.isHasRoots && (h("th", { key: 'af4811bbd78a46f4ab1e96d9a2f3251e59d5d773', class: "col_issuer" }, h(Typography, { key: '11064fc9659acfb8856ad96aba1192972b27e0e3', variant: "s2" }, l10n.getString('issuer')))), h("th", { key: '7898e55528b973f8dddebff2e86763fc4f0ad013', class: "col_name" }, h(Typography, { key: 'e5bae939345bce44423efaaee774678a163d51a6', variant: "s2" }, l10n.getString('name'))), h("th", { key: '83128f3a2812996df534b95690d6268bf0f096ec', class: "col_public_key" }, h(Typography, { key: '05e7f862d2336e2144ddd9438bb2636625abed36', variant: "s2" }, l10n.getString('publicKey'))), h("th", { key: '1387d00b085a524bd97d96e68e07f3e82ee57796', class: "col_fingerprint" }, h(Typography, { key: '393eac698d27bb9a17a2ae5cec18a0658f510f78', variant: "s2" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("th", { key: 'ffdba17371ff65a6df244edefe55bb81a9e821c8' })))), h("tbody", { key: '8e44c28a8d4bc64fe76c73d67054df3dcef7a7c1' }, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
     }
     static get watchers() { return {
         "certificates": ["watchCertificates"]
     }; }
-    static get style() { return PeculiarCertificatesViewerStyle0; }
+    static get style() { return certificatesViewerCss; }
 }, [1, "peculiar-certificates-viewer", {
         "certificates": [16],
         "filterWithSearch": [4, "filter-with-search"],
@@ -340,5 +360,6 @@ const PeculiarCertificatesViewer = CertificatesViewer;
 const defineCustomElement = defineCustomElement$1;
 
 export { PeculiarCertificatesViewer, defineCustomElement };
+//# sourceMappingURL=peculiar-certificates-viewer.js.map
 
 //# sourceMappingURL=peculiar-certificates-viewer.js.map