npm - @peculiar/certificates-viewer - Versions diffs - 4.2.0 → 4.2.2 - Mend

@peculiar/certificates-viewer 4.2.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (707) hide show

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

@@ -17,394 +17,394 @@ import { CertificateSummary } from "../certificate-summary";
 import { Button } from "../button";
 import { DownloadIcon, LinkIcon, DetailsIcon, ArrowBottomIcon, ArrowTopIcon, CrossIcon, } from "../icons";
 export class CertificatesViewer {
-  constructor() {
-    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() {
+        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;
-    }
-    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;
+    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;
         }
-      }
-      catch (error) {
-        console.error('Error certificate parse:', error);
-      }
     }
-    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;
+    disconnectedCallback() {
+        this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));
     }
-    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;
+    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);
+            }
         }
-      }
-      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;
+        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);
     }
-    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;
+    // eslint-disable-next-line class-methods-use-this
+    handleClickDownloadAsDer(certificate) {
+        certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);
     }
-    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;
+    handleClickRow(index) {
+        const isExpandedRowClicked = this.expandedRow === index;
+        this.expandedRow = isExpandedRowClicked
+            ? undefined
+            : index;
     }
-    if (!this.certificatesDecoded.length) {
-      return this.renderEmptyState();
+    getMaxColSpanValue() {
+        let colSpan = 5;
+        if (!this.isHasRoots) {
+            colSpan += 1;
+        }
+        return colSpan;
     }
-    const certificatesRows = this.renderCertificatesRows();
-    if (this.search && !certificatesRows.length) {
-      return this.renderEmptySearchState();
+    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 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 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",
-              "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"
+    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;
+                }
             }
-          }
-        },
-        "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": "Use filter in the list when search is changed."
-        },
-        "attribute": "filter-with-search",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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"
-      },
-      "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"
+            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;
         }
-      }, {
-        "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": {}
+        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;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "certificates",
-        "methodName": "watchCertificates"
-      }];
-  }
+        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 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",
+                            "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": "Use filter in the list when search is changed."
+                },
+                "attribute": "filter-with-search",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "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"
+            },
+            "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"
+            }];
+    }
 }
 //# sourceMappingURL=certificates-viewer.js.map