@peculiar/certificates-viewer 3.10.1 → 4.0.2

package/dist/collection/components/certificate-viewer/certificate-viewer.js

@@ -8,13 +8,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, h, Prop, State, Watch, Host, } from '@stencil/core';
-import { X509Certificate, } from '../../crypto';
-import { getDNSNameLink, getIPAddressLink, getLEILink } from '../../utils/third_party_links';
-import { BasicInformation, SubjectName, IssuerName, PublicKey, Signature, Thumbprints, Extensions, Miscellaneous, } from '../certificate-details-parts';
+import { h, Host, Build, } from "@stencil/core";
+import { X509Certificate, } from "../../crypto";
+import { getDNSNameLink, getIPAddressLink, getLEILink } from "../../utils/third_party_links";
+import { BasicInformation, SubjectName, IssuerName, PublicKey, Signature, Thumbprints, Extensions, Miscellaneous, } from "../certificate-details-parts";
+import { Typography } from "../typography";
 export class CertificateViewer {
   constructor() {
-    this.isDecodeInProcess = true;
     this.getAuthKeyIdParentLink = (value) => {
       var _a;
       return (_a = this.authKeyIdParentLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
@@ -31,9 +31,30 @@ export class CertificateViewer {
       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.issuerDnLink = 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;
@@ -78,13 +99,11 @@ export class CertificateViewer {
   }
   // eslint-disable-next-line class-methods-use-this
   renderErrorState() {
-    return (h("div", { class: "status_wrapper" },
-      h("peculiar-typography", { type: "b1", class: "interaction_text" }, "There was an error decoding this certificate.")));
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "There was an error decoding this certificate.")));
   }
   // eslint-disable-next-line class-methods-use-this
   renderEmptyState() {
-    return (h("div", { class: "status_wrapper" },
-      h("peculiar-typography", { type: "b1", class: "interaction_text" }, "There is no certificate available.")));
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no certificate available.")));
   }
   render() {
     if (this.certificateDecodeError) {
@@ -93,184 +112,193 @@ export class CertificateViewer {
     if (!this.certificateDecoded) {
       return this.renderEmptyState();
     }
-    return (h(Host, { "data-view": this.view },
-      h("table", null,
-        h(BasicInformation, Object.assign({}, this.certificateDecoded)),
-        h(SubjectName, { name: this.certificateDecoded.subject }),
-        h(IssuerName, { name: this.certificateDecoded.issuer, issuerDnLink: this.getIssuerDnLink() }),
-        h(PublicKey, { publicKey: this.certificateDecoded.publicKey }),
-        h(Signature, { signature: this.certificateDecoded.signature }),
-        h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }),
-        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 })))));
+    return (h(Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, h("table", null, h(BasicInformation, Object.assign({}, this.certificateDecoded)), h(SubjectName, { name: this.certificateDecoded.subject }), h(IssuerName, { name: this.certificateDecoded.issuer, issuerDnLink: this.getIssuerDnLink() }), h(PublicKey, { publicKey: this.certificateDecoded.publicKey }), h(Signature, { signature: this.certificateDecoded.signature }), h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }), 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 is() { return "peculiar-certificate-viewer"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["certificate-viewer.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["certificate-viewer.css"]
-  }; }
-  static get properties() { return {
-    "certificate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CertificateProp",
-        "resolved": "X509Certificate | string",
-        "references": {
-          "CertificateProp": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["certificate-viewer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["certificate-viewer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "certificate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CertificateProp",
+          "resolved": "X509Certificate | string",
+          "references": {
+            "CertificateProp": {
+              "location": "local",
+              "path": "/Users/donskov/Documents/work/pv/pv-certificates-viewer/packages/webcomponents/src/components/certificate-viewer/certificate-viewer.tsx",
+              "id": "src/components/certificate-viewer/certificate-viewer.tsx::CertificateProp"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The certificate value for decode and show details. Use PEM or DER."
-      },
-      "attribute": "certificate",
-      "reflect": true
-    },
-    "download": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "If `true` - component will show split-button to download certificate as PEM or DER."
-      },
-      "attribute": "download",
-      "reflect": true
-    },
-    "authKeyIdParentLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The certificate value for decode and show details. Use PEM or DER."
+        },
+        "attribute": "certificate",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": " https://censys.io/certificates?q=parsed.extensions.subject_key_id:%20{{authKeyId}}"
-          }],
-        "text": "Authority Key Identifier extension parent link.\n<br />\n**NOTE**: `{{authKeyId}}` will be replaced to value from the extension."
+      "download": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true` - component will show split-button to download certificate as PEM or DER."
+        },
+        "attribute": "download",
+        "reflect": true
       },
-      "attribute": "auth-key-id-parent-link",
-      "reflect": true
-    },
-    "authKeyIdSiblingsLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "authKeyIdParentLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": " https://censys.io/certificates?q=parsed.extensions.subject_key_id:%20{{authKeyId}}"
+            }],
+          "text": "Authority Key Identifier extension parent link.\n<br />\n**NOTE**: `{{authKeyId}}` will be replaced to value from the extension."
+        },
+        "attribute": "auth-key-id-parent-link",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": " https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{authKeyId}}"
-          }],
-        "text": "Authority Key Identifier extension siblings link.\n<br />\n**NOTE**: `{{authKeyId}}` will be replaced to value from the extension."
+      "authKeyIdSiblingsLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": " https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{authKeyId}}"
+            }],
+          "text": "Authority Key Identifier extension siblings link.\n<br />\n**NOTE**: `{{authKeyId}}` will be replaced to value from the extension."
+        },
+        "attribute": "auth-key-id-siblings-link",
+        "reflect": true
       },
-      "attribute": "auth-key-id-siblings-link",
-      "reflect": true
-    },
-    "subjectKeyIdChildrenLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "subjectKeyIdChildrenLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": " https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{subjectKeyId}}"
+            }],
+          "text": "Subject Key Identifier extension children link.\n<br />\n**NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension."
+        },
+        "attribute": "subject-key-id-children-link",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": " https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{subjectKeyId}}"
-          }],
-        "text": "Subject Key Identifier extension children link.\n<br />\n**NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension."
+      "subjectKeyIdSiblingsLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": " https://some.com/{{subjectKeyId}}"
+            }],
+          "text": "Subject Key Identifier extension siblings link.\n<br />\n**NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension."
+        },
+        "attribute": "subject-key-id-siblings-link",
+        "reflect": true
       },
-      "attribute": "subject-key-id-children-link",
-      "reflect": true
-    },
-    "subjectKeyIdSiblingsLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "issuerDnLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Issuer DN link.\n**NOTE**: HTML component attribute must be `issuer-dn-link`."
+        },
+        "attribute": "issuer-dn-link",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": " https://some.com/{{subjectKeyId}}"
-          }],
-        "text": "Subject Key Identifier extension siblings link.\n<br />\n**NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension."
-      },
-      "attribute": "subject-key-id-siblings-link",
-      "reflect": true
-    },
-    "issuerDnLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Issuer DN link.\n**NOTE**: HTML component attribute must be `issuer-dn-link`."
-      },
-      "attribute": "issuer-dn-link",
-      "reflect": true
-    },
-    "view": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'mobile'",
-        "resolved": "\"mobile\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Choose view type instead @media."
-      },
-      "attribute": "view",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "isDecodeInProcess": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "certificate",
-      "methodName": "watchCertificateAndDecode"
-    }]; }
+      "mobileMediaQueryString": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": " (max-width: 900px)"
+            }],
+          "text": "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."
+        },
+        "attribute": "mobile-media-query-string",
+        "reflect": false,
+        "defaultValue": "'(max-width: 900px)'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "mobileScreenView": {},
+      "isDecodeInProcess": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "certificate",
+        "methodName": "watchCertificateAndDecode"
+      }];
+  }
 }
+//# sourceMappingURL=certificate-viewer.js.map

package/dist/collection/components/certificate-viewer/certificate-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"certificate-viewer.js","sourceRoot":"","sources":["../../../src/components/certificate-viewer/certificate-viewer.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  h,\n  Prop,\n  State,\n  Watch,\n  Host,\n  Build,\n} from '@stencil/core';\n\nimport {\n  X509Certificate,\n} from '../../crypto';\nimport { getDNSNameLink, getIPAddressLink, getLEILink } from '../../utils/third_party_links';\nimport {\n  BasicInformation,\n  SubjectName,\n  IssuerName,\n  PublicKey,\n  Signature,\n  Thumbprints,\n  Extensions,\n  Miscellaneous,\n} from '../certificate-details-parts';\nimport { Typography } from '../typography';\n\nexport type CertificateProp = string | X509Certificate;\n\n@Component({\n  tag: 'peculiar-certificate-viewer',\n  styleUrl: 'certificate-viewer.scss',\n  shadow: true,\n})\nexport class CertificateViewer {\n  private certificateDecoded: X509Certificate;\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({ reflect: true }) certificate: CertificateProp;\n\n  /**\n   * If `true` - component will show split-button to download certificate as PEM or DER.\n   */\n  @Prop({ reflect: true }) 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   * Issuer DN link.\n   * **NOTE**: HTML component attribute must be `issuer-dn-link`.\n   */\n  @Prop({ reflect: true }) issuerDnLink?: 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: CertificateProp) {\n    this.isDecodeInProcess = true;\n\n    try {\n      if (certificate instanceof X509Certificate) {\n        this.certificateDecoded = certificate;\n      } else if (typeof certificate === 'string') {\n        this.certificateDecoded = new X509Certificate(certificate);\n      } else {\n        return;\n      }\n\n      this.certificateDecoded.parseExtensions();\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(newValue: CertificateProp, oldValue: CertificateProp) {\n    if (typeof newValue === 'string' && typeof oldValue === 'string') {\n      if (newValue !== oldValue) {\n        this.decodeCertificate(newValue);\n      }\n\n      return;\n    }\n\n    if (newValue instanceof X509Certificate && oldValue instanceof X509Certificate) {\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  private getIssuerDnLink() {\n    return this.issuerDnLink;\n  }\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 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 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          <SubjectName\n            name={this.certificateDecoded.subject}\n          />\n\n          <IssuerName\n            name={this.certificateDecoded.issuer}\n            issuerDnLink={this.getIssuerDnLink()}\n          />\n\n          <PublicKey\n            publicKey={this.certificateDecoded.publicKey}\n          />\n\n          <Signature\n            signature={this.certificateDecoded.signature}\n          />\n\n          <Thumbprints\n            thumbprints={this.certificateDecoded.thumbprints}\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"]}