@peculiar/certificates-viewer 3.10.0 → 3.10.1-alpha.12

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

@@ -8,38 +8,18 @@
  * 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, Event, } from '@stencil/core';
-import { X509Certificate } from '../../crypto';
-import { OIDs } from '../../constants/oids';
-import { l10n } from '../../utils';
+import { h, Host, Build, } from "@stencil/core";
+import { X509Certificate } from "../../crypto";
+import { OIDs } from "../../constants/oids";
+import { l10n } from "../../utils";
+import { Typography } from "../typography";
+import { CertificateSummary } from "../certificate-summary";
+import { Button } from "../button";
+import { DownloadIcon, LinkIcon, DetailsIcon, ArrowBottomIcon, ArrowTopIcon, CrossIcon, } from "../icons";
 export class CertificatesViewer {
   constructor() {
-    /**
-     * List of certificates values for decode and show in the list.
-     * <br />
-     * **NOTE**: If you do not provide a `name` value when
-     * invocing the component it will take the first Subject CN value.
-     * <br />
-     * **NOTE**: If you do not provide a `tests` this column will be ommited from the rendered page.
-     * <br />
-     * **NOTE**: If the supplied certificates are self-signed the issuer column will be ommited.
-     */
-    this.certificates = [];
-    /**
-     * Use filter in the list when search is changed.
-     */
-    this.filterWithSearch = true;
-    /**
-     * Use highlight chapters in the list when search is changed.
-     */
-    this.highlightWithSearch = true;
-    this.search = '';
-    this.certificatesDecoded = [];
-    this.isDecodeInProcess = true;
-    this.isHasTests = false;
     this.isHasRoots = false;
-    this.handleClickDetails = (certificate, e) => {
-      e.stopPropagation();
+    this.handleClickDetails = (certificate) => {
       this.certificateSelectedForDetails = certificate;
       this.detailsOpen.emit(certificate);
     };
@@ -47,12 +27,33 @@ export class CertificatesViewer {
       this.certificateSelectedForDetails = undefined;
       this.detailsClose.emit();
     };
-    this.handleSearch = (e) => {
-      this.search = e.target.value.trim();
+    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;
+    }
+  }
+  disconnectedCallback() {
+    this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
   }
   watchCertificates(newValue, oldValue) {
     /**
@@ -63,7 +64,6 @@ export class CertificatesViewer {
     }
   }
   async certificatesDecodeAndSet() {
-    let hasTests = false;
     let hasRoots = false;
     if (!Array.isArray(this.certificates)) {
       return;
@@ -82,30 +82,21 @@ export class CertificatesViewer {
         if (!hasRoots && decoded.isRoot) {
           hasRoots = true;
         }
-        if (!hasTests) {
-          if (certificate.tests
-            && (certificate.tests.expired || certificate.tests.revoked || certificate.tests.valid)) {
-            hasTests = true;
-          }
-        }
       }
       catch (error) {
         console.error('Error certificate parse:', error);
       }
     }
-    this.isHasTests = hasTests;
     this.isHasRoots = hasRoots;
     this.isDecodeInProcess = false;
     this.certificatesDecoded = data;
   }
   // eslint-disable-next-line class-methods-use-this
-  handleClickDownloadAsPem(certificate, e) {
-    e.stopPropagation();
+  handleClickDownloadAsPem(certificate) {
     certificate.body.downloadAsPEM(certificate.name || certificate.body.commonName);
   }
   // eslint-disable-next-line class-methods-use-this
-  handleClickDownloadAsDer(certificate, e) {
-    e.stopPropagation();
+  handleClickDownloadAsDer(certificate) {
     certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);
   }
   handleClickRow(index) {
@@ -115,39 +106,69 @@ export class CertificatesViewer {
       : index;
   }
   getMaxColSpanValue() {
-    let colSpan = 4;
-    if (this.isHasTests) {
-      colSpan += 1;
-    }
+    let colSpan = 5;
     if (!this.isHasRoots) {
       colSpan += 1;
     }
     return colSpan;
   }
-  renderExpandedRow(certificate) {
-    const colSpan = this.getMaxColSpanValue();
-    return (h("tr", { class: "expanded_summary" },
-      h("td", { colSpan: colSpan },
-        h("peculiar-certificate-summary", { certificate: certificate, showIssuer: !certificate.isRoot }))));
+  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),
+                }] : []),
+            ],
+          }] : []),
+      ] }));
   }
-  // eslint-disable-next-line class-methods-use-this
-  renderCertificateTests(tests) {
-    if (!tests) {
-      return null;
-    }
-    const elems = [];
-    if (tests.valid) {
-      elems.push((h("peculiar-button", { class: "button_table_action", href: tests.valid, target: "_blank" }, l10n.getString('valid'))));
-    }
-    if (tests.revoked) {
-      elems.push((h("peculiar-button", { class: "button_table_action", href: tests.revoked, target: "_blank" }, l10n.getString('revoked'))));
-    }
-    if (tests.expired) {
-      elems.push((h("peculiar-button", { class: "button_table_action", href: tests.expired, target: "_blank" }, l10n.getString('expired'))));
-    }
-    return elems;
+  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)));
   }
-  renderContentState() {
+  renderCertificatesRows() {
     const searchHighlight = this.highlightWithSearch
       ? this.search
       : '';
@@ -170,49 +191,26 @@ export class CertificatesViewer {
           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: {
-            expanded: isExpandedRow,
-          }, onClick: this.handleClickRow.bind(this, index), key: certificate.body.thumbprints['SHA-1'] },
-          !this.isHasRoots && (h("td", null,
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('issuer'),
-              ":"),
-            h("peculiar-typography", { class: "content" },
-              h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))),
-          h("td", null,
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('name'),
-              ":"),
-            h("peculiar-typography", { class: "content" },
-              h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))),
-          h("td", null,
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('publicKey'),
-              ":"),
-            h("peculiar-typography", { class: "content" },
-              h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))),
-          h("td", null,
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('fingerprint'),
-              "\u00A0 (SHA-1):"),
-            h("peculiar-typography", { class: "content", monospace: true },
-              h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))),
-          h("td", { class: "align_center" },
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('actions'),
-              ":"),
-            h("span", { class: "content" },
-              h("peculiar-button", { onClick: this.handleClickDetails.bind(this, certificate.body), class: "button_table_action" }, l10n.getString('details')),
-              h("peculiar-button-split", { onClick: this.handleClickDownloadAsPem.bind(this, certificate), actions: [{
-                    text: l10n.getString('download.der'),
-                    onClick: this.handleClickDownloadAsDer.bind(this, certificate),
-                  }], class: "button_table_action" }, l10n.getString('download.pem')))),
-          this.isHasTests && (h("td", { class: "align_center" },
-            h("peculiar-typography", { class: "mobile_title", color: "grey_5" },
-              l10n.getString('testURLs'),
-              ":"),
-            h("span", { class: "content" }, this.renderCertificateTests(certificate.tests))))),
+            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),
       ]);
     });
@@ -222,194 +220,191 @@ export class CertificatesViewer {
     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_title" },
-          h("peculiar-typography", { type: "h4" }, l10n.getString('certificateDetails')),
-          h("button", { class: "modal_close", onClick: this.handleModalClose, type: "button", "aria-label": "Close", title: "Close" },
-            h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg" },
-              h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.7204 14.375L21.0654 19.7185C21.3115 19.9658 21.3115 20.3693 21.0654 20.6154L20.615 21.0645C20.3689 21.3118 19.9667 21.3118 19.7181 21.0645L14.3744 15.721L9.03194 21.0645C8.78327 21.3118 8.3811 21.3118 8.13371 21.0645L7.68459 20.6154C7.43847 20.3693 7.43847 19.9658 7.68459 19.7185L13.0296 14.375L7.68459 9.03155C7.43847 8.78417 7.43847 8.38074 7.68459 8.13463L8.13371 7.68554C8.3811 7.43815 8.78327 7.43815 9.03194 7.68554L14.3744 13.029L19.7181 7.68554C19.9667 7.43815 20.3689 7.43815 20.615 7.68554L21.0654 8.13463C21.3115 8.38074 21.3115 8.78417 21.0654 9.03155L15.7204 14.375Z" })))),
-        h("div", { class: "modal_content" },
-          h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails })))));
+    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;
     }
-    return (h("div", { class: "search_section" },
-      h("input", { onInput: this.handleSearch, type: "search", value: "", class: "input_search", disabled: !this.certificatesDecoded.length, placeholder: "Search" })));
+    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("peculiar-typography", { type: "b1", align: "center" }, "There are no certificates available."))));
+    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("peculiar-typography", { type: "b1", align: "center" },
-          "No results found for \u201C",
-          this.search,
-          "\u201C"))));
+    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)));
+    return (h("div", { class: "loading_container" }, h("peculiar-circular-progress", null)));
   }
-  renderBody() {
+  renderTableBody() {
     if (this.isDecodeInProcess) {
       return null;
     }
     if (!this.certificatesDecoded.length) {
       return this.renderEmptyState();
     }
-    const contentState = this.renderContentState();
-    if (this.search && !contentState.length) {
+    const certificatesRows = this.renderCertificatesRows();
+    if (this.search && !certificatesRows.length) {
       return this.renderEmptySearchState();
     }
-    return contentState;
+    return certificatesRows;
   }
   render() {
-    return (h(Host, null,
-      this.renderSearch(),
-      h("table", { class: {
-          m_extra: this.isHasTests || !this.isHasRoots,
-        } },
-        h("thead", null,
-          h("tr", null,
-            !this.isHasRoots && (h("th", { class: "col_issuer" },
-              h("peculiar-typography", { type: "h7", align: "left" }, l10n.getString('issuer')))),
-            h("th", { class: "col_name" },
-              h("peculiar-typography", { type: "h7", align: "left" }, l10n.getString('name'))),
-            h("th", { class: "col_public_key" },
-              h("peculiar-typography", { type: "h7", align: "left" }, l10n.getString('publicKey'))),
-            h("th", { class: "col_fingerprint" },
-              h("peculiar-typography", { type: "h7", align: "left" },
-                l10n.getString('fingerprint'),
-                "\u00A0 (SHA-1)")),
-            h("th", { class: "col_actions" },
-              h("peculiar-typography", { type: "h7", align: "center" }, l10n.getString('actions'))),
-            this.isHasTests && (h("th", { class: "col_tests" },
-              h("peculiar-typography", { type: "h7", align: "center" }, l10n.getString('testURLs')))))),
-        h("tbody", null, this.renderBody())),
-      this.renderCertificateDetailsModal(),
-      this.isDecodeInProcess && this.renderLoadingState()));
+    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 is() { return "peculiar-certificates-viewer"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["certificates-viewer.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["certificates-viewer.css"]
-  }; }
-  static get properties() { return {
-    "certificates": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ICertificate[]",
-        "resolved": "ICertificate[]",
-        "references": {
-          "ICertificate": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["certificates-viewer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["certificates-viewer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "certificates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ICertificate[]",
+          "resolved": "ICertificate[]",
+          "references": {
+            "ICertificate": {
+              "location": "local",
+              "path": "/Users/donskov/Documents/work/pv/pv-certificates-viewer/packages/webcomponents/src/components/certificates-viewer/certificates-viewer.tsx",
+              "id": "src/components/certificates-viewer/certificates-viewer.tsx::ICertificate"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of certificates values for decode and show in the list.\n<br />\n**NOTE**: If you do not provide a `name` value when\ninvocing the component it will take the first Subject CN value.\n<br />\n**NOTE**: If you do not provide a `tests` this column will be ommited from the rendered page.\n<br />\n**NOTE**: If the supplied certificates are self-signed the issuer column will be ommited."
-      },
-      "defaultValue": "[]"
-    },
-    "filterWithSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of certificates values for decode and show in the list.\n<br />\n**NOTE**: If you do not provide a `name` value when\ninvocing the component it will take the first Subject CN value.\n<br />\n**NOTE**: If you do not provide a `tests` this column will be ommited from the rendered page.\n<br />\n**NOTE**: If the supplied certificates are self-signed the issuer column will be ommited."
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use filter in the list when search is changed."
+      "filterWithSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use filter in the list when search is changed."
+        },
+        "attribute": "filter-with-search",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "filter-with-search",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "highlightWithSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "highlightWithSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use highlight chapters in the list when search is changed."
+        },
+        "attribute": "highlight-with-search",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use highlight chapters in the list when search is changed."
-      },
-      "attribute": "highlight-with-search",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "search": {},
-    "certificatesDecoded": {},
-    "expandedRow": {},
-    "certificateSelectedForDetails": {},
-    "isDecodeInProcess": {}
-  }; }
-  static get events() { return [{
-      "method": "detailsOpen",
-      "name": "detailsOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the user open certificate details modal."
-      },
-      "complexType": {
-        "original": "X509Certificate",
-        "resolved": "X509Certificate",
-        "references": {
-          "X509Certificate": {
-            "location": "import",
-            "path": "../../crypto"
+      "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": {},
+      "search": {},
+      "certificatesDecoded": {},
+      "expandedRow": {},
+      "certificateSelectedForDetails": {},
+      "isDecodeInProcess": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "detailsOpen",
+        "name": "detailsOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user open certificate details modal."
+        },
+        "complexType": {
+          "original": "X509Certificate",
+          "resolved": "X509Certificate",
+          "references": {
+            "X509Certificate": {
+              "location": "import",
+              "path": "../../crypto",
+              "id": "src/crypto/index.ts::X509Certificate"
+            }
           }
         }
-      }
-    }, {
-      "method": "detailsClose",
-      "name": "detailsClose",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the user close certificate details modal."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "certificates",
-      "methodName": "watchCertificates"
-    }]; }
+      }, {
+        "method": "detailsClose",
+        "name": "detailsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user close certificate details modal."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "certificates",
+        "methodName": "watchCertificates"
+      }];
+  }
 }
+//# sourceMappingURL=certificates-viewer.js.map