npm - @peculiar/certificates-viewer - Versions diffs - 3.10.1 → 4.0.2 - Mend

@peculiar/certificates-viewer 3.10.1 → 4.0.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 (589) hide show

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

@@ -5,45 +5,49 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-064e95c7.js');
-const x509_certificate = require('./x509_certificate-3760e0a8.js');
-const certification_request = require('./certification_request-d5c6e32d.js');
-require('./download-93f7b773.js');
-const l10n = require('./l10n-ddc7cff9.js');
+const index = require('./index-efd561e9.js');
+const x509_certificate = require('./x509_certificate-989b1435.js');
+const certification_request = require('./certification_request-c0cafa72.js');
+require('./download-972dda8a.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 certificatesViewerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{display:block;width:100%;word-wrap:break-word;min-width:280px;overflow:auto;position:relative;background:white;background:rgba(var(--pv-color-light-rgb), 1)}table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0}table thead{background-color:rgba(53, 132, 247, 0.07);background-color:rgba(var(--pv-color-primary-rgb), 0.07)}table tr td{vertical-align:middle}table tbody tr:not(.expanded_summary){cursor:pointer}table tr{border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1)}table th{padding:15px 10px;border-width:1px;border-style:solid;border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1)}table td{padding:8px 10px;border-width:1px;border-style:solid;border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1)}table .col_issuer,table .col_name,table .col_public_key{width:16%}table .col_actions,table .col_tests{width:18%}table.m_extra .col_issuer,table.m_extra .col_name,table.m_extra .col_public_key{width:12%}table.m_extra .col_actions,table.m_extra .col_tests{width:17%}table tr.expanded td:not(:last-child){border-right-color:transparent}table tr.expanded td{border-bottom-color:transparent}.expanded{border-bottom-color:transparent;background-color:rgba(53, 132, 247, 0.04);background-color:rgba(var(--pv-color-primary-rgb), 0.04)}table tr.expanded_summary{background-color:rgba(53, 132, 247, 0.04);background-color:rgba(var(--pv-color-primary-rgb), 0.04)}table tr.expanded_summary td{vertical-align:top;padding:10px 20px 26px}@-webkit-keyframes fadeIn{0%{opacity:0.001}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0.001}100%{opacity:1}}.modal_wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;overflow:auto;text-align:center;-webkit-animation:fadeIn 200ms;animation:fadeIn 200ms;padding:30px 10px}.modal_wrapper:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:\"\"}.modal_backdrop{background:rgba(42, 49, 52, 0.5);background:rgba(var(--pv-color-dark-rgb), 0.5);z-index:-1;position:fixed;top:0;right:0;bottom:0;left:0}.modal_container{position:relative;display:inline-block;vertical-align:middle;width:100%;max-width:900px;text-align:left;border-radius:3px;overflow:hidden;background-color:white;background-color:rgba(var(--pv-color-light-rgb), 1);height:100%}.modal_title{background-color:rgba(53, 132, 247, 0.07);background-color:rgba(var(--pv-color-primary-rgb), 0.07);border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1);border-bottom-width:1px;border-bottom-style:solid;padding:20px 60px 16px 20px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:60px}.modal_content{height:calc(100% - 60px);overflow-y:auto}.modal_close{cursor:pointer;border:none;background-color:transparent;position:absolute;top:0;bottom:0;right:0;padding:0 12px;-webkit-transition:opacity 100ms;transition:opacity 100ms;outline:none}.modal_close:hover{opacity:0.6}.modal_close svg{fill:#2a3134;fill:rgba(var(--pv-color-dark-rgb), 1)}.button_table_action{margin:2px}.mobile_title{display:none}.status_wrapper{height:85px;text-align:center;pointer-events:none}.search_section{background-color:rgba(53, 132, 247, 0.07);background-color:rgba(var(--pv-color-primary-rgb), 0.07);border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1);height:50px;padding:10px;border-width:1px 1px 0 1px;border-style:solid}.input_search{height:100%;width:100%;border-radius:3px;border-width:1px;border-style:solid;padding:0 14px;font-size:12px;outline:none;border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1);color:#2a3134;color:rgba(var(--pv-color-dark-rgb), 1)}.input_search::-webkit-input-placeholder{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.input_search::-moz-placeholder{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.input_search:-ms-input-placeholder{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.input_search::-ms-input-placeholder{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.input_search::placeholder{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.loading_container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(42, 49, 52, 0.3);background:rgba(var(--pv-color-dark-rgb), 0.3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.align_center{text-align:center}@media (hover: hover){table tbody tr:not(.expanded_summary):hover{background-color:rgba(53, 132, 247, 0.04);background-color:rgba(var(--pv-color-primary-rgb), 0.04)}}@media (max-width: 900px){table,tbody,tr,td{display:block}thead{display:none}tr{padding:0 15px;border-width:1px;border-style:solid}tr:not(:first-child){margin-top:-1px}tr:not(.expanded_summary) td:first-child{border:none !important}table td{padding-left:0;padding-right:0;border-width:1px 0 0 0 !important;border-color:rgba(209, 213, 217, 0.5);border-color:rgba(var(--pv-color-grey_3-rgb), 0.5)}table tr.expanded_summary td{padding:15px 0}.mobile_title{display:inline-block;width:90px;vertical-align:middle}.modal_title{padding:17px 60px 17px 15px}.content{display:inline-block;width:calc(100% - 90px);vertical-align:middle;text-align:left}.expanded_summary{border-top-color:transparent;padding-bottom:10px}.expanded_summary td:before{content:none}.status_wrapper{height:266px;display:table-cell}.search_section{height:60px;padding:15px}.align_center{text-align:inherit}}";
+/**
+ * @license
+ * Copyright (c) Peculiar Ventures, LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * 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 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 CertificatesViewer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.detailsOpen = index.createEvent(this, "detailsOpen", 7);
     this.detailsClose = index.createEvent(this, "detailsClose", 7);
-    /**
-     * 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);
     };
@@ -51,12 +55,33 @@ const CertificatesViewer = class {
       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();
+    {
+      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) {
     /**
@@ -67,7 +92,6 @@ const CertificatesViewer = class {
     }
   }
   async certificatesDecodeAndSet() {
-    let hasTests = false;
     let hasRoots = false;
     if (!Array.isArray(this.certificates)) {
       return;
@@ -86,30 +110,21 @@ const CertificatesViewer = class {
         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) {
@@ -119,37 +134,69 @@ const CertificatesViewer = class {
       : 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 (index.h("tr", { class: "expanded_summary" }, index.h("td", { colSpan: colSpan }, index.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 (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),
+                }] : []),
+            ],
+          }] : []),
+      ] }));
   }
-  // eslint-disable-next-line class-methods-use-this
-  renderCertificateTests(tests) {
-    if (!tests) {
-      return null;
-    }
-    const elems = [];
-    if (tests.valid) {
-      elems.push((index.h("peculiar-button", { class: "button_table_action", href: tests.valid, target: "_blank" }, l10n.l10n.getString('valid'))));
-    }
-    if (tests.revoked) {
-      elems.push((index.h("peculiar-button", { class: "button_table_action", href: tests.revoked, target: "_blank" }, l10n.l10n.getString('revoked'))));
-    }
-    if (tests.expired) {
-      elems.push((index.h("peculiar-button", { class: "button_table_action", href: tests.expired, target: "_blank" }, l10n.l10n.getString('expired'))));
-    }
-    return elems;
+  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)));
   }
-  renderContentState() {
+  renderCertificatesRows() {
     const searchHighlight = this.highlightWithSearch
       ? this.search
       : '';
@@ -172,13 +219,26 @@ const CertificatesViewer = class {
           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: {
-            expanded: isExpandedRow,
-          }, onClick: this.handleClickRow.bind(this, index$1), key: certificate.body.thumbprints['SHA-1'] }, !this.isHasRoots && (index.h("td", null, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('issuer'), ":"), index.h("peculiar-typography", { class: "content" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.issuerCommonName)))), index.h("td", null, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('name'), ":"), index.h("peculiar-typography", { class: "content" }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.name || certificate.body.commonName))), index.h("td", null, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('publicKey'), ":"), index.h("peculiar-typography", { class: "content" }, index.h("peculiar-highlight-words", { search: searchHighlight }, publicKeyValue))), index.h("td", null, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('fingerprint'), "\u00A0 (SHA-1):"), index.h("peculiar-typography", { class: "content", monospace: true }, index.h("peculiar-highlight-words", { search: searchHighlight }, certificate.body.thumbprints['SHA-1']))), index.h("td", { class: "align_center" }, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('actions'), ":"), index.h("span", { class: "content" }, index.h("peculiar-button", { onClick: this.handleClickDetails.bind(this, certificate.body), class: "button_table_action" }, l10n.l10n.getString('details')), index.h("peculiar-button-split", { onClick: this.handleClickDownloadAsPem.bind(this, certificate), actions: [{
-              text: l10n.l10n.getString('download.der'),
-              onClick: this.handleClickDownloadAsDer.bind(this, certificate),
-            }], class: "button_table_action" }, l10n.l10n.getString('download.pem')))), this.isHasTests && (index.h("td", { class: "align_center" }, index.h("peculiar-typography", { class: "mobile_title", color: "grey_5" }, l10n.l10n.getString('testURLs'), ":"), index.h("span", { class: "content" }, this.renderCertificateTests(certificate.tests))))),
+            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),
       ]);
     });
@@ -188,43 +248,41 @@ const CertificatesViewer = class {
     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_title" }, index.h("peculiar-typography", { type: "h4" }, l10n.l10n.getString('certificateDetails')), index.h("button", { class: "modal_close", onClick: this.handleModalClose, type: "button", "aria-label": "Close", title: "Close" }, index.h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { class: "modal_content" }, index.h("peculiar-certificate-viewer", { certificate: this.certificateSelectedForDetails })))));
+    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", disabled: !this.certificatesDecoded.length, placeholder: "Search" })));
+    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("peculiar-typography", { type: "b1", align: "center" }, "There are no certificates available."))));
+    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("peculiar-typography", { type: "b1", align: "center" }, "No results found for \u201C", this.search, "\u201C"))));
+    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)));
   }
-  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 (index.h(index.Host, null, this.renderSearch(), index.h("table", { class: {
-        m_extra: this.isHasTests || !this.isHasRoots,
-      } }, index.h("thead", null, index.h("tr", null, !this.isHasRoots && (index.h("th", { class: "col_issuer" }, index.h("peculiar-typography", { type: "h7", align: "left" }, l10n.l10n.getString('issuer')))), index.h("th", { class: "col_name" }, index.h("peculiar-typography", { type: "h7", align: "left" }, l10n.l10n.getString('name'))), index.h("th", { class: "col_public_key" }, index.h("peculiar-typography", { type: "h7", align: "left" }, l10n.l10n.getString('publicKey'))), index.h("th", { class: "col_fingerprint" }, index.h("peculiar-typography", { type: "h7", align: "left" }, l10n.l10n.getString('fingerprint'), "\u00A0 (SHA-1)")), index.h("th", { class: "col_actions" }, index.h("peculiar-typography", { type: "h7", align: "center" }, l10n.l10n.getString('actions'))), this.isHasTests && (index.h("th", { class: "col_tests" }, index.h("peculiar-typography", { type: "h7", align: "center" }, l10n.l10n.getString('testURLs')))))), index.h("tbody", null, this.renderBody())), this.renderCertificateDetailsModal(), this.isDecodeInProcess && this.renderLoadingState()));
+    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"]
@@ -233,3 +291,5 @@ const CertificatesViewer = class {
 CertificatesViewer.style = certificatesViewerCss;
 exports.peculiar_certificates_viewer = CertificatesViewer;
+//# sourceMappingURL=peculiar-certificates-viewer.cjs.entry.js.map

package/dist/cjs/peculiar-certificates-viewer.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"peculiar-certificates-viewer.entry.cjs.js","mappings":"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","names":["h","Typography","l10n","dateShort","X509Certificate","DetailsIcon","DownloadIcon","LinkIcon","index","OIDs","Button","ArrowTopIcon","ArrowBottomIcon","CrossIcon","Host"],"sources":["src/components/certificate-summary/certificate-summary.tsx","src/components/certificates-viewer/certificates-viewer.scss?tag=peculiar-certificates-viewer&encapsulation=shadow","src/components/certificates-viewer/certificates-viewer.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h } from '@stencil/core';\nimport type { X509Certificate } from '../../crypto';\nimport { dateShort, l10n } from '../../utils';\nimport { Typography } from '../typography';\n\ninterface CertificateSummaryProps {\n certificate: X509Certificate;\n showIssuer?: boolean;\n}\n\nexport const CertificateSummary: FunctionalComponent<CertificateSummaryProps> = (props) => {\n const {\n certificate,\n showIssuer,\n } = props;\n\n const renderRow = (name: string | string[], value: string | number) => (\n <tr>\n <td>\n <Typography\n variant=\"b2\"\n color=\"gray-9\"\n >\n {name}\n </Typography>\n </td>\n <td>\n <Typography\n variant=\"b2\"\n color=\"black\"\n >\n {value}\n </Typography>\n </td>\n </tr>\n );\n\n return (\n <table>\n <tbody>\n {renderRow(\n l10n.getString('subjectName'),\n certificate.subjectToString(),\n )}\n {showIssuer && renderRow(\n l10n.getString('issuerName'),\n certificate.issuerToString(),\n )}\n\n {renderRow(\n l10n.getString('serialNumber'),\n certificate.serialNumber,\n )}\n {renderRow(\n l10n.getString('version'),\n certificate.version,\n )}\n {renderRow(\n l10n.getString('validity'),\n certificate.validity,\n )}\n {renderRow(\n l10n.getString('issued'),\n dateShort(certificate.notBefore),\n )}\n {renderRow(\n l10n.getString('expired'),\n dateShort(certificate.notAfter),\n )}\n </tbody>\n </table>\n );\n};\n","@import '../../css/base.scss';\n\n:host {\n display: block;\n width: 100%;\n word-wrap: break-word;\n min-width: 280px;\n overflow: auto;\n position: relative;\n}\n\n.search_section {\n padding: var(--pv-size-base-4);\n border-bottom: 1px solid var(--pv-color-gray-4);\n}\n\n.input_search {\n height: var(--pv-size-base-8);\n width: 100%;\n outline: none;\n background-color: var(--pv-color-gray-1);\n padding: 0 var(--pv-size-base-2);\n border: 1px solid var(--pv-color-gray-7);\n border-radius: 4px;\n transition: background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;\n &::placeholder {\n color: var(--pv-color-gray-9);\n }\n}\n\ntable {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border-spacing: 0;\n\n td, th {\n border-bottom: 1px solid var(--pv-color-gray-4);\n vertical-align: top;\n text-align: left;\n\n &:first-child {\n padding-right: 0;\n width: var(--pv-size-base-10);\n }\n &:last-child {\n padding-left: 0;\n width: var(--pv-size-base-10);\n }\n }\n\n th {\n padding: var(--pv-size-base-2) var(--pv-size-base-4);\n\n &.col_action {\n padding: 0;\n }\n }\n\n td {\n padding: var(--pv-size-base-4);\n }\n\n tr {\n &.m_expanded {\n background: var(--pv-color-gray-1);\n\n > td {\n border-bottom: none;\n }\n }\n\n &.expanded_summary {\n background: var(--pv-color-gray-1);\n\n table {\n table-layout: initial;\n\n td {\n border-bottom: none;\n padding: var(--pv-size-base-2);\n\n &:first-child {\n width: 200px;\n }\n\n &:last-child {\n width: auto;\n }\n }\n }\n }\n }\n}\n\n.button_table_cell {\n margin-top: -3px;\n}\n\n.status_wrapper {\n text-align: center;\n height: var(--pv-size-base-16);\n vertical-align: middle;\n}\n\n.modal_wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n animation: fadeIn 200ms;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal_backdrop {\n background: var(--pv-color-black);\n z-index: -1;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0.5;\n}\n\n.modal_container {\n background: var(--pv-color-white);\n width: 100%;\n display: flex;\n max-height: calc(100% - 60px);\n flex-direction: column;\n margin: var(--pv-size-base-6);\n position: relative;\n outline: none;\n box-shadow: var(--pv-shadow-dark-hight);\n overflow: hidden;\n border: 0px;\n padding: 0px;\n max-width: 640px;\n border-radius: 4px;\n}\n\n.modal_header {\n padding: var(--pv-size-base-3) var(--pv-size-base-4);\n display: flex;\n flex: 0 0 auto;\n -webkit-box-pack: justify;\n justify-content: space-between;\n gap: var(--pv-size-base-2);\n border-bottom: 1px solid var(--pv-color-gray-5);\n}\n\n.modal_content {\n flex: 1 1 auto;\n overflow: auto;\n}\n\n:host([data-mobile-screen-view=\"true\"]) {\n table, tbody, tr, td {\n display: block;\n width: 100% !important;\n padding: 0;\n border: none;\n }\n\n thead {\n display: none;\n }\n\n table {\n tr {\n padding: var(--pv-size-base-2) 0;\n }\n\n .expanded_summary {\n padding: 0;\n }\n\n .certificate_row {\n border-bottom: 1px solid var(--pv-color-gray-5);\n padding: var(--pv-size-base-2) var(--pv-size-base-4);\n }\n\n .certificate_row_actions {\n padding-top: var(--pv-size-base-6);\n\n td {\n display: flex;\n justify-content: right;\n gap: var(--pv-size-base-4);\n }\n }\n }\n\n .button_table_cell {\n margin-top: 0;\n }\n}\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n h,\n Prop,\n State,\n Watch,\n Host,\n Event,\n EventEmitter,\n Build,\n} from '@stencil/core';\n\nimport { X509Certificate } from '../../crypto';\nimport { OIDs } from '../../constants/oids';\nimport { l10n } from '../../utils';\nimport { Typography } from '../typography';\nimport { CertificateSummary } from '../certificate-summary';\nimport { Button } from '../button';\nimport {\n DownloadIcon,\n LinkIcon,\n DetailsIcon,\n ArrowBottomIcon,\n ArrowTopIcon,\n CrossIcon,\n} from '../icons';\n\nexport interface ICertificate {\n value: string;\n name?: string;\n tests?: {\n valid?: string;\n revoked?: string;\n expired?: string;\n };\n}\n\ninterface ICertificateDecoded {\n body: X509Certificate;\n tests?: ICertificate['tests'];\n name?: string;\n}\n\n@Component({\n tag: 'peculiar-certificates-viewer',\n styleUrl: 'certificates-viewer.scss',\n shadow: true,\n})\nexport class CertificatesViewer {\n private isHasRoots: boolean = false;\n\n private mobileMediaQuery: MediaQueryList;\n\n /**\n * List of certificates values for decode and show in the list.\n * <br />\n * **NOTE**: If you do not provide a `name` value when\n * invocing 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.\n */\n @Prop() certificates: ICertificate[] = [];\n\n /**\n * Use filter in the list when search is changed.\n */\n @Prop() filterWithSearch: boolean = true;\n\n /**\n * Use highlight chapters in the list when search is changed.\n */\n @Prop() highlightWithSearch: boolean = true;\n\n /**\n * Mobile media query string to control screen view change.\n * <br />\n * **NOTE**: Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.\n * @example\n * (max-width: 900px)\n */\n @Prop({ reflect: false }) mobileMediaQueryString?: string = '(max-width: 900px)';\n\n /**\n * Emitted when the user open certificate details modal.\n */\n @Event() detailsOpen!: EventEmitter<X509Certificate>;\n\n /**\n * Emitted when the user close certificate details modal.\n */\n @Event() detailsClose!: EventEmitter<void>;\n\n @State() mobileScreenView: boolean = false;\n\n @State() search: string = '';\n\n @State() certificatesDecoded: ICertificateDecoded[] = [];\n\n @State() expandedRow?: number;\n\n @State() certificateSelectedForDetails?: X509Certificate;\n\n @State() isDecodeInProcess: boolean = true;\n\n private handleMediaQueryChange(event: MediaQueryListEvent) {\n this.mobileScreenView = event.matches;\n }\n\n componentWillLoad() {\n this.certificatesDecodeAndSet();\n\n if (Build.isBrowser) {\n this.mobileMediaQuery = window.matchMedia(this.mobileMediaQueryString);\n this.mobileMediaQuery.addEventListener('change', this.handleMediaQueryChange.bind(this));\n this.mobileScreenView = this.mobileMediaQuery.matches;\n }\n }\n\n disconnectedCallback() {\n this.mobileMediaQuery.removeEventListener('change', this.handleMediaQueryChange.bind(this));\n }\n\n @Watch('certificates')\n watchCertificates(newValue: ICertificate[], oldValue: ICertificate[]) {\n /**\n * Prevent rerender after set the same `certificates` prop.\n */\n if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {\n this.certificatesDecodeAndSet();\n }\n }\n\n async certificatesDecodeAndSet() {\n let hasRoots = false;\n\n if (!Array.isArray(this.certificates)) {\n return;\n }\n\n const data: ICertificateDecoded[] = [];\n\n // eslint-disable-next-line no-restricted-syntax\n for (const certificate of this.certificates) {\n try {\n const decoded = new X509Certificate(certificate.value);\n\n await decoded.getThumbprint('SHA-1');\n\n data.push({\n body: decoded,\n tests: certificate.tests,\n name: certificate.name,\n });\n\n if (!hasRoots && decoded.isRoot) {\n hasRoots = true;\n }\n } catch (error) {\n console.error('Error certificate parse:', error);\n }\n }\n\n this.isHasRoots = hasRoots;\n this.isDecodeInProcess = false;\n this.certificatesDecoded = data;\n }\n\n // eslint-disable-next-line class-methods-use-this\n private handleClickDownloadAsPem(certificate: ICertificateDecoded) {\n certificate.body.downloadAsPEM(certificate.name || certificate.body.commonName);\n }\n\n // eslint-disable-next-line class-methods-use-this\n private handleClickDownloadAsDer(certificate: ICertificateDecoded) {\n certificate.body.downloadAsDER(certificate.name || certificate.body.commonName);\n }\n\n private handleClickDetails = (certificate: X509Certificate) => {\n this.certificateSelectedForDetails = certificate;\n this.detailsOpen.emit(certificate);\n };\n\n private handleModalClose = () => {\n this.certificateSelectedForDetails = undefined;\n\n this.detailsClose.emit();\n };\n\n private handleClickRow(index: number) {\n const isExpandedRowClicked = this.expandedRow === index;\n\n this.expandedRow = isExpandedRowClicked\n ? undefined\n : index;\n }\n\n private handleSearch = (event: any) => {\n this.search = event.target.value.trim();\n };\n\n private getMaxColSpanValue() {\n let colSpan = 5;\n\n if (!this.isHasRoots) {\n colSpan += 1;\n }\n\n return colSpan;\n }\n\n private renderCertificateButtonActions(certificate: ICertificateDecoded) {\n const isHasTestURLs = certificate.tests\n && (certificate.tests.expired || certificate.tests.revoked || certificate.tests.valid);\n\n return (\n <peculiar-button-menu\n class=\"button_table_cell\"\n groups={[\n {\n title: l10n.getString('previewCertificate'),\n options: [\n {\n text: l10n.getString('viewDetails'),\n startIcon: <DetailsIcon />,\n onClick: () => this.handleClickDetails(certificate.body),\n },\n ],\n },\n {\n title: l10n.getString('downloadOptions'),\n options: [\n {\n text: l10n.getString('download.pem'),\n startIcon: <DownloadIcon />,\n onClick: () => this.handleClickDownloadAsPem(certificate),\n },\n {\n text: l10n.getString('download.der'),\n startIcon: <DownloadIcon />,\n onClick: () => this.handleClickDownloadAsDer(certificate),\n },\n ],\n },\n ...(isHasTestURLs ? [{\n title: l10n.getString('testURLs'),\n options: [\n ...(certificate.tests?.valid ? [{\n text: l10n.getString('valid'),\n href: certificate.tests.valid,\n startIcon: <LinkIcon />,\n }] : []),\n ...(certificate.tests?.revoked ? [{\n text: l10n.getString('revoked'),\n href: certificate.tests.revoked,\n startIcon: <LinkIcon />,\n }] : []),\n ...(certificate.tests?.expired ? [{\n text: l10n.getString('expired'),\n href: certificate.tests.expired,\n startIcon: <LinkIcon />,\n }] : []),\n ],\n }] : []),\n ]}\n />\n );\n }\n\n private renderExpandedRow(certificate: X509Certificate) {\n const colSpan = this.getMaxColSpanValue() - 2;\n\n return (\n <tr class=\"expanded_summary\">\n <td />\n <td colSpan={colSpan}>\n <CertificateSummary\n certificate={certificate}\n showIssuer={!certificate.isRoot}\n />\n </td>\n <td />\n </tr>\n );\n }\n\n private renderCertificatesRows() {\n const searchHighlight = this.highlightWithSearch\n ? this.search\n : '';\n const content = [];\n\n this.certificatesDecoded.forEach((certificate, index) => {\n const isExpandedRow = index === this.expandedRow;\n const publicKeyValue = OIDs[certificate.body.signature.algorithm]\n || certificate.body.signature.algorithm;\n\n if (this.filterWithSearch && this.search) {\n const certificateStringForSearch = [\n publicKeyValue,\n certificate.body.issuerCommonName,\n certificate.name,\n certificate.body.commonName,\n certificate.body.thumbprints['SHA-1'],\n ]\n .join(' ')\n .toLowerCase();\n\n if (certificateStringForSearch.indexOf(this.search.toLowerCase()) === -1) {\n return;\n }\n }\n\n if (this.mobileScreenView) {\n content.push([\n <tr\n class={{\n certificate_row: true,\n m_expanded: isExpandedRow,\n }}\n key={certificate.body.thumbprints['SHA-1']}\n >\n <td>\n <table>\n <tbody>\n {!this.isHasRoots && (\n <tr>\n <td>\n <Typography variant=\"b2\" color=\"gray-9\">\n {l10n.getString('issuer')}\n </Typography>\n </td>\n <td>\n <Typography variant=\"b2\" color=\"black\">\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.body.issuerCommonName}\n </peculiar-highlight-words>\n </Typography>\n </td>\n </tr>\n )}\n <tr>\n <td>\n <Typography variant=\"b2\" color=\"gray-9\">\n {l10n.getString('name')}\n </Typography>\n </td>\n <td>\n <Typography variant=\"b2\" color=\"black\">\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.name || certificate.body.commonName}\n </peculiar-highlight-words>\n </Typography>\n </td>\n </tr>\n <tr>\n <td>\n <Typography variant=\"b2\" color=\"gray-9\">\n {l10n.getString('publicKey')}\n </Typography>\n </td>\n <td>\n <Typography variant=\"b2\" color=\"black\">\n <peculiar-highlight-words search={searchHighlight}>\n {publicKeyValue}\n </peculiar-highlight-words>\n </Typography>\n </td>\n </tr>\n <tr>\n <td>\n <Typography variant=\"b2\" color=\"gray-9\">\n {l10n.getString('fingerprint')}\n   (SHA-1)\n </Typography>\n </td>\n <td>\n <Typography variant=\"b2\" color=\"black\">\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.body.thumbprints['SHA-1']}\n </peculiar-highlight-words>\n </Typography>\n </td>\n </tr>\n {isExpandedRow && this.renderExpandedRow(certificate.body)}\n <tr class=\"certificate_row_actions\">\n <td>\n {this.renderCertificateButtonActions(certificate)}\n <Button\n // eslint-disable-next-line react/jsx-no-bind\n onClick={this.handleClickRow.bind(this, index)}\n startIcon={isExpandedRow ? <ArrowTopIcon /> : <ArrowBottomIcon />}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>,\n ]);\n\n return;\n }\n\n content.push([\n <tr\n class={{\n m_expanded: isExpandedRow,\n }}\n key={certificate.body.thumbprints['SHA-1']}\n >\n <td>\n <Button\n class=\"button_table_cell\"\n // eslint-disable-next-line react/jsx-no-bind\n onClick={this.handleClickRow.bind(this, index)}\n startIcon={isExpandedRow ? <ArrowTopIcon /> : <ArrowBottomIcon />}\n />\n </td>\n {!this.isHasRoots && (\n <td>\n <Typography>\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.body.issuerCommonName}\n </peculiar-highlight-words>\n </Typography>\n </td>\n )}\n <td>\n <Typography>\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.name || certificate.body.commonName}\n </peculiar-highlight-words>\n </Typography>\n </td>\n <td>\n <Typography>\n <peculiar-highlight-words search={searchHighlight}>\n {publicKeyValue}\n </peculiar-highlight-words>\n </Typography>\n </td>\n <td>\n <Typography>\n <peculiar-highlight-words search={searchHighlight}>\n {certificate.body.thumbprints['SHA-1']}\n </peculiar-highlight-words>\n </Typography>\n </td>\n <td>\n {this.renderCertificateButtonActions(certificate)}\n </td>\n </tr>,\n isExpandedRow && this.renderExpandedRow(certificate.body),\n ]);\n });\n\n return content;\n }\n\n private renderCertificateDetailsModal() {\n if (!this.certificateSelectedForDetails) {\n return null;\n }\n\n return (\n <div\n class=\"modal_wrapper\"\n role=\"presentation\"\n aria-hidden=\"false\"\n part=\"presentation\"\n >\n <div\n class=\"modal_backdrop\"\n onClick={this.handleModalClose}\n aria-hidden=\"true\"\n />\n <div\n class=\"modal_container\"\n role=\"dialog\"\n part=\"presentation_container\"\n >\n <header class=\"modal_header\">\n <Typography\n variant=\"h4\"\n >\n {l10n.getString('certificateDetails')}\n </Typography>\n <Button\n onClick={this.handleModalClose}\n startIcon={<CrossIcon />}\n />\n </header>\n <div class=\"modal_content\">\n <peculiar-certificate-viewer\n certificate={this.certificateSelectedForDetails}\n mobileMediaQueryString={this.mobileMediaQueryString}\n />\n </div>\n </div>\n </div>\n );\n }\n\n private renderSearch() {\n if (!this.filterWithSearch && !this.highlightWithSearch) {\n return null;\n }\n\n return (\n <div class=\"search_section\">\n <input\n onInput={this.handleSearch}\n type=\"search\"\n value=\"\"\n class=\"input_search t-b3 c-black\"\n disabled={!this.certificatesDecoded.length}\n placeholder=\"Search\"\n />\n </div>\n );\n }\n\n private renderEmptyState() {\n const colSpan = this.getMaxColSpanValue();\n\n return (\n <tr>\n <td\n class=\"status_wrapper\"\n colSpan={colSpan}\n >\n <Typography\n variant=\"b1\"\n >\n There are no certificates available.\n </Typography>\n </td>\n </tr>\n );\n }\n\n private renderEmptySearchState() {\n const colSpan = this.getMaxColSpanValue();\n\n return (\n <tr>\n <td\n class=\"status_wrapper\"\n colSpan={colSpan}\n >\n <Typography\n variant=\"b1\"\n >\n No results found for “\n {this.search}\n “\n </Typography>\n </td>\n </tr>\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private renderLoadingState() {\n return (\n <div class=\"loading_container\">\n <peculiar-circular-progress />\n </div>\n );\n }\n\n private renderTableBody() {\n if (this.isDecodeInProcess) {\n return null;\n }\n\n if (!this.certificatesDecoded.length) {\n return this.renderEmptyState();\n }\n\n const certificatesRows = this.renderCertificatesRows();\n\n if (this.search && !certificatesRows.length) {\n return this.renderEmptySearchState();\n }\n\n return certificatesRows;\n }\n\n render() {\n return (\n <Host\n data-mobile-screen-view={String(this.mobileScreenView)}\n >\n {this.renderSearch()}\n <table>\n {!this.mobileScreenView && (\n <thead>\n <tr>\n {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n <th />\n {!this.isHasRoots && (\n <th class=\"col_issuer\">\n <Typography variant=\"s2\">\n {l10n.getString('issuer')}\n </Typography>\n </th>\n )}\n <th class=\"col_name\">\n <Typography variant=\"s2\">\n {l10n.getString('name')}\n </Typography>\n </th>\n <th class=\"col_public_key\">\n <Typography variant=\"s2\">\n {l10n.getString('publicKey')}\n </Typography>\n </th>\n <th class=\"col_fingerprint\">\n <Typography variant=\"s2\">\n {l10n.getString('fingerprint')}\n   (SHA-1)\n </Typography>\n </th>\n {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n <th />\n </tr>\n </thead>\n )}\n <tbody>\n {this.renderTableBody()}\n </tbody>\n </table>\n\n {this.renderCertificateDetailsModal()}\n {this.isDecodeInProcess && this.renderLoadingState()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/peculiar-text-hider.cjs.entry.js CHANGED Viewed

@@ -5,29 +5,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-064e95c7.js');
+const index = require('./index-efd561e9.js');
+const button = require('./button-14e2b73f.js');
+const arrow_top = require('./arrow_top-834fb7ec.js');
-const textHiderCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{display:block;width:100%}.text{display:inline-block;width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.text.m_opened{white-space:initial}.action{vertical-align:top;display:inline-block;width:60px;text-align:right;position:relative;top:-6px}.button_action{width:30px}.expand_icon{width:7px;height:5px;display:inline-block}.m_opened .expand_icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}";
+const textHiderCss = ".sc-peculiar-text-hider-h{display:-ms-flexbox;display:flex;width:100%;gap:var(--pv-size-base-4)}[aria-expanded=true].sc-peculiar-text-hider-h .content.sc-peculiar-text-hider{white-space:initial}.content.sc-peculiar-text-hider{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.action.sc-peculiar-text-hider{-ms-flex-negative:0;flex-shrink:0;margin-top:calc(var(--pv-size-base) * -1)}";
 const TextHider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.textExpand = index.createEvent(this, "textExpand", 7);
     this.opened = false;
   }
-  textExpandHandler() {
-    this.opened = !this.opened;
-  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "root" }, index.h("div", { class: {
-        text: true,
-        m_opened: this.opened,
-      } }, index.h("slot", null)), index.h("div", { class: "action" }, index.h("peculiar-button", { onClick: this.textExpand.emit, class: {
-        button_action: true,
-        m_opened: this.opened,
-      }, fill: this.opened ? 'fill' : 'stroke' }, index.h("svg", { viewBox: "0 0 7 5", xmlns: "http://www.w3.org/2000/svg", class: "expand_icon" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", fill: "currentColor", d: "M5.459.124c.934.001 1.442.994.84 1.644L4.425 3.794c-.44.475-1.244.475-1.684 0L.862 1.764C.26 1.115.77.12 1.705.122l3.754.003z" })))))));
+    return (index.h(index.Host, { "aria-expanded": String(this.opened) }, index.h("div", { class: "content" }, index.h("slot", null)), index.h(button.Button, { class: "action", onClick: () => { this.opened = !this.opened; }, startIcon: this.opened ? index.h(arrow_top.ArrowTopIcon, { color: "secondary" }) : index.h(arrow_top.ArrowBottomIcon, { color: "secondary" }) })));
   }
 };
 TextHider.style = textHiderCss;
 exports.peculiar_text_hider = TextHider;
+//# sourceMappingURL=peculiar-text-hider.cjs.entry.js.map

package/dist/cjs/peculiar-text-hider.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"peculiar-text-hider.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,oZAAoZ;;MCsB5Z,SAAS;;;kBACO,KAAK;;EAEhC,MAAM;IACJ,QACEA,QAACC,UAAI,qBACY,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAElCD,iBAAK,KAAK,EAAC,SAAS,IAClBA,qBAAQ,CACJ,EACNA,QAACE,aAAM,IACL,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,QAAQ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAC9C,SAAS,EAAE,IAAI,CAAC,MAAM,GAAGF,QAACG,sBAAY,IAAC,KAAK,EAAC,WAAW,GAAG,GAAGH,QAACI,yBAAe,IAAC,KAAK,EAAC,WAAW,GAAG,GACnG,CACG,EACP;GACH;;;;;;","names":["h","Host","Button","ArrowTopIcon","ArrowBottomIcon"],"sources":["src/components/text-hider/text-hider.scss?tag=peculiar-text-hider&encapsulation=scoped","src/components/text-hider/text-hider.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n gap: var(--pv-size-base-4);\n\n &[aria-expanded=\"true\"] {\n .content {\n white-space: initial;\n }\n }\n}\n\n.content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n\n.action {\n flex-shrink: 0;\n margin-top: calc(var(--pv-size-base) * -1);\n}\n","/**\n * @license\n * Copyright (c) Peculiar Ventures, LLC.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Host,\n h,\n State,\n} from '@stencil/core';\nimport { Button } from '../button';\nimport { ArrowBottomIcon, ArrowTopIcon } from '../icons';\n\n@Component({\n tag: 'peculiar-text-hider',\n styleUrl: 'text-hider.scss',\n scoped: true,\n})\nexport class TextHider {\n @State() opened: boolean = false;\n\n render() {\n return (\n <Host\n aria-expanded={String(this.opened)}\n >\n <div class=\"content\">\n <slot />\n </div>\n <Button\n class=\"action\"\n onClick={() => { this.opened = !this.opened; }}\n startIcon={this.opened ? <ArrowTopIcon color=\"secondary\" /> : <ArrowBottomIcon color=\"secondary\" />}\n />\n </Host>\n );\n }\n}\n"],"version":3}