@peculiar/certificates-viewer 4.2.0 → 4.2.1

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 { l as l10n, ae as dateShort, Q as OIDs } from './miscellaneous.js';
+import { l as l10n, ag as dateShort, X as OIDs } from './miscellaneous.js';
 import { a as DownloadIcon } 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';
@@ -20,320 +20,321 @@ import { d as defineCustomElement$2 } from './highlight-words.js';
  * LICENSE file in the root directory of this source tree.
  */
 const CertificateSummary = (props) => {
-  const { certificate, showIssuer, } = props;
-  const renderRow = (name, value) => (h("tr", null,
-    h("td", null,
-      h(Typography, { variant: "b2", color: "gray-9" }, name)),
-    h("td", null,
-      h(Typography, { variant: "b2", color: "black" }, value))));
-  return (h("table", null,
-    h("tbody", null,
-      renderRow(l10n.getString('subjectName'), certificate.subjectToString()),
-      showIssuer && renderRow(l10n.getString('issuerName'), certificate.issuerToString()),
-      renderRow(l10n.getString('serialNumber'), certificate.serialNumber),
-      renderRow(l10n.getString('version'), certificate.version),
-      renderRow(l10n.getString('validity'), certificate.validity),
-      renderRow(l10n.getString('issued'), dateShort(certificate.notBefore)),
-      renderRow(l10n.getString('expired'), dateShort(certificate.notAfter)))));
+    const { certificate, showIssuer, } = props;
+    const renderRow = (name, value) => (h("tr", null,
+        h("td", null,
+            h(Typography, { variant: "b2", color: "gray-9" }, name)),
+        h("td", null,
+            h(Typography, { variant: "b2", color: "black" }, value))));
+    return (h("table", null,
+        h("tbody", null,
+            renderRow(l10n.getString('subjectName'), certificate.subjectToString()),
+            showIssuer && renderRow(l10n.getString('issuerName'), certificate.issuerToString()),
+            renderRow(l10n.getString('serialNumber'), certificate.serialNumber),
+            renderRow(l10n.getString('version'), certificate.version),
+            renderRow(l10n.getString('validity'), certificate.validity),
+            renderRow(l10n.getString('issued'), dateShort(certificate.notBefore)),
+            renderRow(l10n.getString('expired'), dateShort(certificate.notAfter)))));
 };
 
 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() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.detailsOpen = createEvent(this, "detailsOpen", 7);
-    this.detailsClose = createEvent(this, "detailsClose", 7);
-    this.isHasRoots = false;
-    this.handleClickDetails = (certificate) => {
-      this.certificateSelectedForDetails = certificate;
-      this.detailsOpen.emit(certificate);
-    };
-    this.handleModalClose = () => {
-      this.certificateSelectedForDetails = undefined;
-      this.detailsClose.emit();
-    };
-    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;
-  }
-  componentWillLoad() {
-    this.certificatesDecodeAndSet();
-    if (Build.isBrowser) {
-      this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);
-      this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));
-      this.mobileScreenView = this.mobileMediaQuery.matches;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.detailsOpen = createEvent(this, "detailsOpen", 7);
+        this.detailsClose = createEvent(this, "detailsClose", 7);
+        this.isHasRoots = false;
+        this.handleClickDetails = (certificate) => {
+            this.certificateSelectedForDetails = certificate;
+            this.detailsOpen.emit(certificate);
+        };
+        this.handleModalClose = () => {
+            this.certificateSelectedForDetails = undefined;
+            this.detailsClose.emit();
+        };
+        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;
     }
-  }
-  disconnectedCallback() {
-    this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-  }
-  watchCertificates(newValue, oldValue) {
-    /**
-     * Prevent rerender after set the same `certificates` prop.
-     */
-    if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
-      this.certificatesDecodeAndSet();
+    handleMediaQueryChange(event) {
+        this.mobileScreenView = event.matches;
     }
-  }
-  async certificatesDecodeAndSet() {
-    let hasRoots = false;
-    if (!Array.isArray(this.certificates)) {
-      return;
+    componentWillLoad() {
+        this.certificatesDecodeAndSet();
+        if (Build.isBrowser) {
+            this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);
+            this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));
+            this.mobileScreenView = this.mobileMediaQuery.matches;
+        }
     }
-    const data = [];
-    // eslint-disable-next-line no-restricted-syntax
-    for (const certificate of this.certificates) {
-      try {
-        const decoded = new X509Certificate(certificate.value);
-        await decoded.getThumbprint('SHA-1');
-        data.push({
-          body: decoded,
-          tests: certificate.tests,
-          name: certificate.name,
-        });
-        if (!hasRoots && decoded.isRoot) {
-          hasRoots = true;
+    disconnectedCallback() {
+        this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    }
+    watchCertificates(newValue, oldValue) {
+        /**
+         * Prevent rerender after set the same `certificates` prop.
+         */
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+            this.certificatesDecodeAndSet();
+        }
+    }
+    async certificatesDecodeAndSet() {
+        let hasRoots = false;
+        if (!Array.isArray(this.certificates)) {
+            return;
+        }
+        const data = [];
+        // eslint-disable-next-line no-restricted-syntax
+        for (const certificate of this.certificates) {
+            try {
+                const decoded = new X509Certificate(certificate.value);
+                await decoded.getThumbprint('SHA-1');
+                data.push({
+                    body: decoded,
+                    tests: certificate.tests,
+                    name: certificate.name,
+                });
+                if (!hasRoots && decoded.isRoot) {
+                    hasRoots = true;
+                }
+            }
+            catch (error) {
+                console.error('Error certificate parse:', error);
+            }
         }
-      }
-      catch (error) {
-        console.error('Error certificate parse:', error);
-      }
+        this.isHasRoots = hasRoots;
+        this.isDecodeInProcess = false;
+        this.certificatesDecoded = data;
     }
-    this.isHasRoots = hasRoots;
-    this.isDecodeInProcess = false;
-    this.certificatesDecoded = data;
-  }
-  // eslint-disable-next-line class-methods-use-this
-  handleClickDownloadAsPem(certificate) {
-    certificate.body.downloadAsPEM(certificate.name || certificate.body.commonName);
-  }
-  // eslint-disable-next-line class-methods-use-this
-  handleClickDownloadAsDer(certificate) {
-    certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);
-  }
-  handleClickRow(index) {
-    const isExpandedRowClicked = this.expandedRow === index;
-    this.expandedRow = isExpandedRowClicked
-      ? undefined
-      : index;
-  }
-  getMaxColSpanValue() {
-    let colSpan = 5;
-    if (!this.isHasRoots) {
-      colSpan += 1;
+    // eslint-disable-next-line class-methods-use-this
+    handleClickDownloadAsPem(certificate) {
+        certificate.body.downloadAsPEM(certificate.name || certificate.body.commonName);
     }
-    return colSpan;
-  }
-  renderCertificateButtonActions(certificate) {
-    var _a, _b, _c;
-    const isHasTestURLs = certificate.tests
-      && (certificate.tests.expired || certificate.tests.revoked || certificate.tests.valid);
-    return (h("peculiar-button-menu", { class: "button_table_cell", groups: [
-        {
-          title: l10n.getString('previewCertificate'),
-          options: [
-            {
-              text: l10n.getString('viewDetails'),
-              startIcon: h(DetailsIcon, null),
-              onClick: () => this.handleClickDetails(certificate.body),
-            },
-          ],
-        },
-        {
-          title: l10n.getString('downloadOptions'),
-          options: [
-            {
-              text: l10n.getString('download.pem'),
-              startIcon: h(DownloadIcon, null),
-              onClick: () => this.handleClickDownloadAsPem(certificate),
-            },
-            {
-              text: l10n.getString('download.der'),
-              startIcon: h(DownloadIcon, null),
-              onClick: () => this.handleClickDownloadAsDer(certificate),
-            },
-          ],
-        },
-        ...(isHasTestURLs ? [{
-            title: l10n.getString('testURLs'),
-            options: [
-              ...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid) ? [{
-                  text: l10n.getString('valid'),
-                  href: certificate.tests.valid,
-                  startIcon: h(LinkIcon, null),
-                }] : []),
-              ...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked) ? [{
-                  text: l10n.getString('revoked'),
-                  href: certificate.tests.revoked,
-                  startIcon: h(LinkIcon, null),
-                }] : []),
-              ...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired) ? [{
-                  text: l10n.getString('expired'),
-                  href: certificate.tests.expired,
-                  startIcon: h(LinkIcon, null),
-                }] : []),
-            ],
-          }] : []),
-      ] }));
-  }
-  renderExpandedRow(certificate) {
-    const colSpan = this.getMaxColSpanValue() - 2;
-    return (h("tr", { class: "expanded_summary" }, h("td", null), h("td", { colSpan: colSpan }, h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), h("td", null)));
-  }
-  renderCertificatesRows() {
-    const searchHighlight = this.highlightWithSearch
-      ? this.search
-      : '';
-    const content = [];
-    this.certificatesDecoded.forEach((certificate, index) => {
-      const isExpandedRow = index === this.expandedRow;
-      const publicKeyValue = OIDs[certificate.body.signature.algorithm]
-        || certificate.body.signature.algorithm;
-      if (this.filterWithSearch && this.search) {
-        const certificateStringForSearch = [
-          publicKeyValue,
-          certificate.body.issuerCommonName,
-          certificate.name,
-          certificate.body.commonName,
-          certificate.body.thumbprints['SHA-1'],
-        ]
-          .join(' ')
-          .toLowerCase();
-        if (certificateStringForSearch.indexOf(this.search.toLowerCase()) === -1) {
-          return;
+    // eslint-disable-next-line class-methods-use-this
+    handleClickDownloadAsDer(certificate) {
+        certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);
+    }
+    handleClickRow(index) {
+        const isExpandedRowClicked = this.expandedRow === index;
+        this.expandedRow = isExpandedRowClicked
+            ? undefined
+            : index;
+    }
+    getMaxColSpanValue() {
+        let colSpan = 5;
+        if (!this.isHasRoots) {
+            colSpan += 1;
         }
-      }
-      if (this.mobileScreenView) {
-        content.push([
-          h("tr", { class: {
-              certificate_row: true,
-              m_expanded: isExpandedRow,
-            }, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h("table", null, h("tbody", null, !this.isHasRoots && (h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('issuer'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('name'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('publicKey'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), h("tr", { class: "certificate_row_actions" }, h("td", null, this.renderCertificateButtonActions(certificate), h(Button
-          // eslint-disable-next-line react/jsx-no-bind
-          , {
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null)
-          }))))))),
-        ]);
-        return;
-      }
-      content.push([
-        h("tr", { class: {
-            m_expanded: isExpandedRow,
-          }, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h(Button, { class: "button_table_cell",
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null) })), !this.isHasRoots && (h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), h("td", null, this.renderCertificateButtonActions(certificate))),
-        isExpandedRow && this.renderExpandedRow(certificate.body),
-      ]);
-    });
-    return content;
-  }
-  renderCertificateDetailsModal() {
-    if (!this.certificateSelectedForDetails) {
-      return null;
+        return colSpan;
     }
-    return (h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, h("div", { class: "modal_backdrop", onClick: this.handleModalClose, "aria-hidden": "true" }), h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, h("header", { class: "modal_header" }, h(Typography, { variant: "h4" }, l10n.getString('certificateDetails')), h(Button, { onClick: this.handleModalClose, startIcon: h(CrossIcon, null) })), h("div", { class: "modal_content" }, h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails, mobileMediaQueryString: this.mobileMediaQueryString })))));
-  }
-  renderSearch() {
-    if (!this.filterWithSearch && !this.highlightWithSearch) {
-      return null;
+    renderCertificateButtonActions(certificate) {
+        var _a, _b, _c;
+        const isHasTestURLs = certificate.tests
+            && (certificate.tests.expired || certificate.tests.revoked || certificate.tests.valid);
+        return (h("peculiar-button-menu", { class: "button_table_cell", groups: [
+                {
+                    title: l10n.getString('previewCertificate'),
+                    options: [
+                        {
+                            text: l10n.getString('viewDetails'),
+                            startIcon: h(DetailsIcon, null),
+                            onClick: () => this.handleClickDetails(certificate.body),
+                        },
+                    ],
+                },
+                {
+                    title: l10n.getString('downloadOptions'),
+                    options: [
+                        {
+                            text: l10n.getString('download.pem'),
+                            startIcon: h(DownloadIcon, null),
+                            onClick: () => this.handleClickDownloadAsPem(certificate),
+                        },
+                        {
+                            text: l10n.getString('download.der'),
+                            startIcon: h(DownloadIcon, null),
+                            onClick: () => this.handleClickDownloadAsDer(certificate),
+                        },
+                    ],
+                },
+                ...(isHasTestURLs ? [{
+                        title: l10n.getString('testURLs'),
+                        options: [
+                            ...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid) ? [{
+                                    text: l10n.getString('valid'),
+                                    href: certificate.tests.valid,
+                                    startIcon: h(LinkIcon, null),
+                                }] : []),
+                            ...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked) ? [{
+                                    text: l10n.getString('revoked'),
+                                    href: certificate.tests.revoked,
+                                    startIcon: h(LinkIcon, null),
+                                }] : []),
+                            ...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired) ? [{
+                                    text: l10n.getString('expired'),
+                                    href: certificate.tests.expired,
+                                    startIcon: h(LinkIcon, null),
+                                }] : []),
+                        ],
+                    }] : []),
+            ] }));
     }
-    return (h("div", { class: "search_section" }, h("input", { onInput: this.handleSearch, type: "search", value: "", class: "input_search t-b3 c-black", disabled: !this.certificatesDecoded.length, placeholder: "Search" })));
-  }
-  renderEmptyState() {
-    const colSpan = this.getMaxColSpanValue();
-    return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "There are no certificates available."))));
-  }
-  renderEmptySearchState() {
-    const colSpan = this.getMaxColSpanValue();
-    return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
-  }
-  // eslint-disable-next-line class-methods-use-this
-  renderLoadingState() {
-    return (h("div", { class: "loading_container" }, h("peculiar-circular-progress", null)));
-  }
-  renderTableBody() {
-    if (this.isDecodeInProcess) {
-      return null;
+    renderExpandedRow(certificate) {
+        const colSpan = this.getMaxColSpanValue() - 2;
+        return (h("tr", { class: "expanded_summary" }, h("td", null), h("td", { colSpan: colSpan }, h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), h("td", null)));
     }
-    if (!this.certificatesDecoded.length) {
-      return this.renderEmptyState();
+    renderCertificatesRows() {
+        const searchHighlight = this.highlightWithSearch
+            ? this.search
+            : '';
+        const content = [];
+        this.certificatesDecoded.forEach((certificate, index) => {
+            const isExpandedRow = index === this.expandedRow;
+            const publicKeyValue = OIDs[certificate.body.signature.algorithm]
+                || certificate.body.signature.algorithm;
+            if (this.filterWithSearch && this.search) {
+                const certificateStringForSearch = [
+                    publicKeyValue,
+                    certificate.body.issuerCommonName,
+                    certificate.name,
+                    certificate.body.commonName,
+                    certificate.body.thumbprints['SHA-1'],
+                ]
+                    .join(' ')
+                    .toLowerCase();
+                if (certificateStringForSearch.indexOf(this.search.toLowerCase()) === -1) {
+                    return;
+                }
+            }
+            if (this.mobileScreenView) {
+                content.push([
+                    h("tr", { class: {
+                            certificate_row: true,
+                            m_expanded: isExpandedRow,
+                        }, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h("table", null, h("tbody", null, !this.isHasRoots && (h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('issuer'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('name'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('publicKey'))), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), h("tr", null, h("td", null, h(Typography, { variant: "b2", color: "gray-9" }, l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), h("td", null, h(Typography, { variant: "b2", color: "black" }, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), h("tr", { class: "certificate_row_actions" }, h("td", null, this.renderCertificateButtonActions(certificate), h(Button
+                    // eslint-disable-next-line react/jsx-no-bind
+                    , {
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null)
+                    }))))))),
+                ]);
+                return;
+            }
+            content.push([
+                h("tr", { class: {
+                        m_expanded: isExpandedRow,
+                    }, key: certificate.body.thumbprints['SHA-1'] }, h("td", null, h(Button, { class: "button_table_cell",
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick: this.handleClickRow.bind(this, index), startIcon: isExpandedRow ? h(ArrowTopIcon, null) : h(ArrowBottomIcon, null) })), !this.isHasRoots && (h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), h("td", null, h(Typography, null, h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), h("td", null, this.renderCertificateButtonActions(certificate))),
+                isExpandedRow && this.renderExpandedRow(certificate.body),
+            ]);
+        });
+        return content;
     }
-    const certificatesRows = this.renderCertificatesRows();
-    if (this.search && !certificatesRows.length) {
-      return this.renderEmptySearchState();
+    renderCertificateDetailsModal() {
+        if (!this.certificateSelectedForDetails) {
+            return null;
+        }
+        return (h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, h("div", { class: "modal_backdrop", onClick: this.handleModalClose, "aria-hidden": "true" }), h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, h("header", { class: "modal_header" }, h(Typography, { variant: "h4" }, l10n.getString('certificateDetails')), h(Button, { onClick: this.handleModalClose, startIcon: h(CrossIcon, null) })), h("div", { class: "modal_content" }, h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails, mobileMediaQueryString: this.mobileMediaQueryString })))));
     }
-    return certificatesRows;
-  }
-  render() {
-    return (h(Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), h("table", null, !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", null, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
-  }
-  static get watchers() { return {
-    "certificates": ["watchCertificates"]
-  }; }
-  static get style() { return certificatesViewerCss; }
+    renderSearch() {
+        if (!this.filterWithSearch && !this.highlightWithSearch) {
+            return null;
+        }
+        return (h("div", { class: "search_section" }, h("input", { onInput: this.handleSearch, type: "search", value: "", class: "input_search t-b3 c-black", disabled: !this.certificatesDecoded.length, placeholder: "Search" })));
+    }
+    renderEmptyState() {
+        const colSpan = this.getMaxColSpanValue();
+        return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "There are no certificates available."))));
+    }
+    renderEmptySearchState() {
+        const colSpan = this.getMaxColSpanValue();
+        return (h("tr", null, h("td", { class: "status_wrapper", colSpan: colSpan }, h(Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
+    }
+    // eslint-disable-next-line class-methods-use-this
+    renderLoadingState() {
+        return (h("div", { class: "loading_container" }, h("peculiar-circular-progress", null)));
+    }
+    renderTableBody() {
+        if (this.isDecodeInProcess) {
+            return null;
+        }
+        if (!this.certificatesDecoded.length) {
+            return this.renderEmptyState();
+        }
+        const certificatesRows = this.renderCertificatesRows();
+        if (this.search && !certificatesRows.length) {
+            return this.renderEmptySearchState();
+        }
+        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()));
+    }
+    static get watchers() { return {
+        "certificates": ["watchCertificates"]
+    }; }
+    static get style() { return PeculiarCertificatesViewerStyle0; }
 }, [1, "peculiar-certificates-viewer", {
-    "certificates": [16],
-    "filterWithSearch": [4, "filter-with-search"],
-    "highlightWithSearch": [4, "highlight-with-search"],
-    "mobileMediaQueryString": [1, "mobile-media-query-string"],
-    "mobileScreenView": [32],
-    "search": [32],
-    "certificatesDecoded": [32],
-    "expandedRow": [32],
-    "certificateSelectedForDetails": [32],
-    "isDecodeInProcess": [32]
-  }, undefined, {
-    "certificates": ["watchCertificates"]
-  }]);
+        "certificates": [16],
+        "filterWithSearch": [4, "filter-with-search"],
+        "highlightWithSearch": [4, "highlight-with-search"],
+        "mobileMediaQueryString": [1, "mobile-media-query-string"],
+        "mobileScreenView": [32],
+        "search": [32],
+        "certificatesDecoded": [32],
+        "expandedRow": [32],
+        "certificateSelectedForDetails": [32],
+        "isDecodeInProcess": [32]
+    }, undefined, {
+        "certificates": ["watchCertificates"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["peculiar-certificates-viewer", "peculiar-button-menu", "peculiar-certificate-viewer", "peculiar-circular-progress", "peculiar-highlight-words"];
-  components.forEach(tagName => { switch (tagName) {
-    case "peculiar-certificates-viewer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CertificatesViewer);
-      }
-      break;
-    case "peculiar-button-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "peculiar-certificate-viewer":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "peculiar-circular-progress":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "peculiar-highlight-words":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["peculiar-certificates-viewer", "peculiar-button-menu", "peculiar-certificate-viewer", "peculiar-circular-progress", "peculiar-highlight-words"];
+    components.forEach(tagName => { switch (tagName) {
+        case "peculiar-certificates-viewer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CertificatesViewer);
+            }
+            break;
+        case "peculiar-button-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "peculiar-certificate-viewer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "peculiar-circular-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "peculiar-highlight-words":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const PeculiarCertificatesViewer = CertificatesViewer;