@peculiar/certificates-viewer 4.2.0 → 4.2.2

package/dist/cjs/peculiar-certificates-viewer.cjs.entry.js

@@ -5,14 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-efd561e9.js');
-const x509_certificate = require('./x509_certificate-69764c52.js');
-const certification_request = require('./certification_request-5672c667.js');
-require('./download-0fa5b33c.js');
-const button = require('./button-14e2b73f.js');
-const cross = require('./cross-9872c473.js');
-const download = require('./download-254ddc57.js');
-const arrow_top = require('./arrow_top-834fb7ec.js');
+const index = require('./index-e2ae280a.js');
+const x509_certificate = require('./x509_certificate-9914b149.js');
+const certification_request = require('./certification_request-815ec558.js');
+const button = require('./button-87086210.js');
+const cross = require('./cross-bd099933.js');
+const download = require('./download-820d66ba.js');
+const arrow_top = require('./arrow_top-76e4261e.js');
 
 /**
  * @license
@@ -22,273 +21,274 @@ const arrow_top = require('./arrow_top-834fb7ec.js');
  * LICENSE file in the root directory of this source tree.
  */
 const CertificateSummary = (props) => {
-  const { certificate, showIssuer, } = props;
-  const renderRow = (name, value) => (index.h("tr", null,
-    index.h("td", null,
-      index.h(button.Typography, { variant: "b2", color: "gray-9" }, name)),
-    index.h("td", null,
-      index.h(button.Typography, { variant: "b2", color: "black" }, value))));
-  return (index.h("table", null,
-    index.h("tbody", null,
-      renderRow(certification_request.l10n.getString('subjectName'), certificate.subjectToString()),
-      showIssuer && renderRow(certification_request.l10n.getString('issuerName'), certificate.issuerToString()),
-      renderRow(certification_request.l10n.getString('serialNumber'), certificate.serialNumber),
-      renderRow(certification_request.l10n.getString('version'), certificate.version),
-      renderRow(certification_request.l10n.getString('validity'), certificate.validity),
-      renderRow(certification_request.l10n.getString('issued'), certification_request.dateShort(certificate.notBefore)),
-      renderRow(certification_request.l10n.getString('expired'), certification_request.dateShort(certificate.notAfter)))));
+    const { certificate, showIssuer, } = props;
+    const renderRow = (name, value) => (index.h("tr", null,
+        index.h("td", null,
+            index.h(button.Typography, { variant: "b2", color: "gray-9" }, name)),
+        index.h("td", null,
+            index.h(button.Typography, { variant: "b2", color: "black" }, value))));
+    return (index.h("table", null,
+        index.h("tbody", null,
+            renderRow(certification_request.l10n.getString('subjectName'), certificate.subjectToString()),
+            showIssuer && renderRow(certification_request.l10n.getString('issuerName'), certificate.issuerToString()),
+            renderRow(certification_request.l10n.getString('serialNumber'), certificate.serialNumber),
+            renderRow(certification_request.l10n.getString('version'), certificate.version),
+            renderRow(certification_request.l10n.getString('validity'), certificate.validity),
+            renderRow(certification_request.l10n.getString('issued'), certification_request.dateShort(certificate.notBefore)),
+            renderRow(certification_request.l10n.getString('expired'), certification_request.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.detailsOpen = index.createEvent(this, "detailsOpen", 7);
-    this.detailsClose = index.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();
-    {
-      this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);
-      this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));
-      this.mobileScreenView = this.mobileMediaQuery.matches;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.detailsOpen = index.createEvent(this, "detailsOpen", 7);
+        this.detailsClose = index.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();
+        {
+            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 x509_certificate.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;
         }
-      }
-      catch (error) {
-        console.error('Error certificate parse:', error);
-      }
+        const data = [];
+        // eslint-disable-next-line no-restricted-syntax
+        for (const certificate of this.certificates) {
+            try {
+                const decoded = new x509_certificate.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);
+            }
+        }
+        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 (index.h("peculiar-button-menu", { class: "button_table_cell", groups: [
-        {
-          title: certification_request.l10n.getString('previewCertificate'),
-          options: [
-            {
-              text: certification_request.l10n.getString('viewDetails'),
-              startIcon: index.h(cross.DetailsIcon, null),
-              onClick: () => this.handleClickDetails(certificate.body),
-            },
-          ],
-        },
-        {
-          title: certification_request.l10n.getString('downloadOptions'),
-          options: [
-            {
-              text: certification_request.l10n.getString('download.pem'),
-              startIcon: index.h(download.DownloadIcon, null),
-              onClick: () => this.handleClickDownloadAsPem(certificate),
-            },
-            {
-              text: certification_request.l10n.getString('download.der'),
-              startIcon: index.h(download.DownloadIcon, null),
-              onClick: () => this.handleClickDownloadAsDer(certificate),
-            },
-          ],
-        },
-        ...(isHasTestURLs ? [{
-            title: certification_request.l10n.getString('testURLs'),
-            options: [
-              ...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid) ? [{
-                  text: certification_request.l10n.getString('valid'),
-                  href: certificate.tests.valid,
-                  startIcon: index.h(cross.LinkIcon, null),
-                }] : []),
-              ...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked) ? [{
-                  text: certification_request.l10n.getString('revoked'),
-                  href: certificate.tests.revoked,
-                  startIcon: index.h(cross.LinkIcon, null),
-                }] : []),
-              ...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired) ? [{
-                  text: certification_request.l10n.getString('expired'),
-                  href: certificate.tests.expired,
-                  startIcon: index.h(cross.LinkIcon, null),
-                }] : []),
-            ],
-          }] : []),
-      ] }));
-  }
-  renderExpandedRow(certificate) {
-    const colSpan = this.getMaxColSpanValue() - 2;
-    return (index.h("tr", { class: "expanded_summary" }, index.h("td", null), index.h("td", { colSpan: colSpan }, index.h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), index.h("td", null)));
-  }
-  renderCertificatesRows() {
-    const searchHighlight = this.highlightWithSearch
-      ? this.search
-      : '';
-    const content = [];
-    this.certificatesDecoded.forEach((certificate, index$1) => {
-      const isExpandedRow = index$1 === this.expandedRow;
-      const publicKeyValue = certification_request.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([
-          index.h("tr", { class: {
-              certificate_row: true,
-              m_expanded: isExpandedRow,
-            }, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h("table", null, index.h("tbody", null, !this.isHasRoots && (index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('issuer'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('name'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName)))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('publicKey'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), index.h("tr", { class: "certificate_row_actions" }, index.h("td", null, this.renderCertificateButtonActions(certificate), index.h(button.Button
-          // eslint-disable-next-line react/jsx-no-bind
-          , {
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: this.handleClickRow.bind(this, index$1), startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null)
-          }))))))),
-        ]);
-        return;
-      }
-      content.push([
-        index.h("tr", { class: {
-            m_expanded: isExpandedRow,
-          }, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h(button.Button, { class: "button_table_cell",
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick: this.handleClickRow.bind(this, index$1), startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null) })), !this.isHasRoots && (index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), index.h("td", null, this.renderCertificateButtonActions(certificate))),
-        isExpandedRow && this.renderExpandedRow(certificate.body),
-      ]);
-    });
-    return content;
-  }
-  renderCertificateDetailsModal() {
-    if (!this.certificateSelectedForDetails) {
-      return null;
+        return colSpan;
     }
-    return (index.h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, index.h("div", { class: "modal_backdrop", onClick: this.handleModalClose, "aria-hidden": "true" }), index.h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, index.h("header", { class: "modal_header" }, index.h(button.Typography, { variant: "h4" }, certification_request.l10n.getString('certificateDetails')), index.h(button.Button, { onClick: this.handleModalClose, startIcon: index.h(cross.CrossIcon, null) })), index.h("div", { class: "modal_content" }, index.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 (index.h("peculiar-button-menu", { class: "button_table_cell", groups: [
+                {
+                    title: certification_request.l10n.getString('previewCertificate'),
+                    options: [
+                        {
+                            text: certification_request.l10n.getString('viewDetails'),
+                            startIcon: index.h(cross.DetailsIcon, null),
+                            onClick: () => this.handleClickDetails(certificate.body),
+                        },
+                    ],
+                },
+                {
+                    title: certification_request.l10n.getString('downloadOptions'),
+                    options: [
+                        {
+                            text: certification_request.l10n.getString('download.pem'),
+                            startIcon: index.h(download.DownloadIcon, null),
+                            onClick: () => this.handleClickDownloadAsPem(certificate),
+                        },
+                        {
+                            text: certification_request.l10n.getString('download.der'),
+                            startIcon: index.h(download.DownloadIcon, null),
+                            onClick: () => this.handleClickDownloadAsDer(certificate),
+                        },
+                    ],
+                },
+                ...(isHasTestURLs ? [{
+                        title: certification_request.l10n.getString('testURLs'),
+                        options: [
+                            ...(((_a = certificate.tests) === null || _a === void 0 ? void 0 : _a.valid) ? [{
+                                    text: certification_request.l10n.getString('valid'),
+                                    href: certificate.tests.valid,
+                                    startIcon: index.h(cross.LinkIcon, null),
+                                }] : []),
+                            ...(((_b = certificate.tests) === null || _b === void 0 ? void 0 : _b.revoked) ? [{
+                                    text: certification_request.l10n.getString('revoked'),
+                                    href: certificate.tests.revoked,
+                                    startIcon: index.h(cross.LinkIcon, null),
+                                }] : []),
+                            ...(((_c = certificate.tests) === null || _c === void 0 ? void 0 : _c.expired) ? [{
+                                    text: certification_request.l10n.getString('expired'),
+                                    href: certificate.tests.expired,
+                                    startIcon: index.h(cross.LinkIcon, null),
+                                }] : []),
+                        ],
+                    }] : []),
+            ] }));
     }
-    return (index.h("div", { class: "search_section" }, index.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 (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(button.Typography, { variant: "b1" }, "There are no certificates available."))));
-  }
-  renderEmptySearchState() {
-    const colSpan = this.getMaxColSpanValue();
-    return (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(button.Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
-  }
-  // eslint-disable-next-line class-methods-use-this
-  renderLoadingState() {
-    return (index.h("div", { class: "loading_container" }, index.h("peculiar-circular-progress", null)));
-  }
-  renderTableBody() {
-    if (this.isDecodeInProcess) {
-      return null;
+    renderExpandedRow(certificate) {
+        const colSpan = this.getMaxColSpanValue() - 2;
+        return (index.h("tr", { class: "expanded_summary" }, index.h("td", null), index.h("td", { colSpan: colSpan }, index.h(CertificateSummary, { certificate: certificate, showIssuer: !certificate.isRoot })), index.h("td", null)));
     }
-    if (!this.certificatesDecoded.length) {
-      return this.renderEmptyState();
+    renderCertificatesRows() {
+        const searchHighlight = this.highlightWithSearch
+            ? this.search
+            : '';
+        const content = [];
+        this.certificatesDecoded.forEach((certificate, index$1) => {
+            const isExpandedRow = index$1 === this.expandedRow;
+            const publicKeyValue = certification_request.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([
+                    index.h("tr", { class: {
+                            certificate_row: true,
+                            m_expanded: isExpandedRow,
+                        }, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h("table", null, index.h("tbody", null, !this.isHasRoots && (index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('issuer'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName))))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('name'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName)))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('publicKey'))), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue)))), index.h("tr", null, index.h("td", null, index.h(button.Typography, { variant: "b2", color: "gray-9" }, certification_request.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("td", null, index.h(button.Typography, { variant: "b2", color: "black" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1'])))), isExpandedRow && this.renderExpandedRow(certificate.body), index.h("tr", { class: "certificate_row_actions" }, index.h("td", null, this.renderCertificateButtonActions(certificate), index.h(button.Button
+                    // eslint-disable-next-line react/jsx-no-bind
+                    , {
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: this.handleClickRow.bind(this, index$1), startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null)
+                    }))))))),
+                ]);
+                return;
+            }
+            content.push([
+                index.h("tr", { class: {
+                        m_expanded: isExpandedRow,
+                    }, key: certificate.body.thumbprints['SHA-1'] }, index.h("td", null, index.h(button.Button, { class: "button_table_cell",
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick: this.handleClickRow.bind(this, index$1), startIcon: isExpandedRow ? index.h(arrow_top.ArrowTopIcon, null) : index.h(arrow_top.ArrowBottomIcon, null) })), !this.isHasRoots && (index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), index.h("td", null, index.h(button.Typography, null, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), index.h("td", null, this.renderCertificateButtonActions(certificate))),
+                isExpandedRow && this.renderExpandedRow(certificate.body),
+            ]);
+        });
+        return content;
+    }
+    renderCertificateDetailsModal() {
+        if (!this.certificateSelectedForDetails) {
+            return null;
+        }
+        return (index.h("div", { class: "modal_wrapper", role: "presentation", "aria-hidden": "false", part: "presentation" }, index.h("div", { class: "modal_backdrop", onClick: this.handleModalClose, "aria-hidden": "true" }), index.h("div", { class: "modal_container", role: "dialog", part: "presentation_container" }, index.h("header", { class: "modal_header" }, index.h(button.Typography, { variant: "h4" }, certification_request.l10n.getString('certificateDetails')), index.h(button.Button, { onClick: this.handleModalClose, startIcon: index.h(cross.CrossIcon, null) })), index.h("div", { class: "modal_content" }, index.h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails, mobileMediaQueryString: this.mobileMediaQueryString })))));
+    }
+    renderSearch() {
+        if (!this.filterWithSearch && !this.highlightWithSearch) {
+            return null;
+        }
+        return (index.h("div", { class: "search_section" }, index.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 (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(button.Typography, { variant: "b1" }, "There are no certificates available."))));
+    }
+    renderEmptySearchState() {
+        const colSpan = this.getMaxColSpanValue();
+        return (index.h("tr", null, index.h("td", { class: "status_wrapper", colSpan: colSpan }, index.h(button.Typography, { variant: "b1" }, "No results found for \u201C", this.search, "\u201C"))));
+    }
+    // eslint-disable-next-line class-methods-use-this
+    renderLoadingState() {
+        return (index.h("div", { class: "loading_container" }, index.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;
     }
-    const certificatesRows = this.renderCertificatesRows();
-    if (this.search && !certificatesRows.length) {
-      return this.renderEmptySearchState();
+    render() {
+        return (index.h(index.Host, { key: 'e10ac3070a3cb75cb9a281a999fec42ef28d593d', "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), index.h("table", { key: 'abc765a09c9537c36500143c6caffa688910483e' }, !this.mobileScreenView && (index.h("thead", null, index.h("tr", null, index.h("th", null), !this.isHasRoots && (index.h("th", { class: "col_issuer" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('issuer')))), index.h("th", { class: "col_name" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('name'))), index.h("th", { class: "col_public_key" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('publicKey'))), index.h("th", { class: "col_fingerprint" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("th", null)))), index.h("tbody", { key: 'e61dfb14836909b154cdbc359c8f04bef5a42df0' }, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
     }
-    return certificatesRows;
-  }
-  render() {
-    return (index.h(index.Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, this.renderSearch(), index.h("table", null, !this.mobileScreenView && (index.h("thead", null, index.h("tr", null, index.h("th", null), !this.isHasRoots && (index.h("th", { class: "col_issuer" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('issuer')))), index.h("th", { class: "col_name" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('name'))), index.h("th", { class: "col_public_key" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('publicKey'))), index.h("th", { class: "col_fingerprint" }, index.h(button.Typography, { variant: "s2" }, certification_request.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("th", null)))), index.h("tbody", null, this.renderTableBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
-  }
-  static get watchers() { return {
-    "certificates": ["watchCertificates"]
-  }; }
+    static get watchers() { return {
+        "certificates": ["watchCertificates"]
+    }; }
 };
-CertificatesViewer.style = certificatesViewerCss;
+CertificatesViewer.style = PeculiarCertificatesViewerStyle0;
 
 exports.peculiar_certificates_viewer = CertificatesViewer;