@peculiar/certificates-viewer 3.1.0 → 3.2.1

package/dist/esm/peculiar-button_5.entry.js

@@ -0,0 +1,140 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { r as registerInstance, h, c as createEvent, H as Host } from './index-bbd484d9.js';
+
+const buttonCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{display:inline-block;width:auto;cursor:pointer;position:relative;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;--pv-button-padding-end:5px;--pv-button-padding-start:5px}.button{font-family:\"Open Sans\", \"Arial\", sans-serif;font-family:var(--pv-font-family);font-size:13px;font-size:var(--pv-font-size-b3);letter-spacing:0.03em;letter-spacing:var(--pv-letter-spacing-normal);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;border-style:solid;border-width:1px;font-weight:400;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;cursor:inherit;height:30px;line-height:30px;border-radius:2px;padding:0 5px;padding:0 var(--pv-button-padding-end) 0 var(--pv-button-padding-start)}.button::-moz-focus-inner{border:0}.button:focus{outline:none;-webkit-box-shadow:0 4px 10px 0 rgba(var(--pv-color-dark-rgb), 0.1);box-shadow:0 4px 10px 0 rgba(var(--pv-color-dark-rgb), 0.1)}.button[disabled]{opacity:0.5;cursor:not-allowed}.button_stroke{border-color:rgba(53, 132, 247, 0.3);border-color:rgba(var(--pv-color-primary-rgb), 0.3);color:#3584f7;color:rgba(var(--pv-color-primary-rgb), 1);background-color:transparent}.button_fill{border-color:#3584f7;border-color:rgba(var(--pv-color-primary-rgb), 1);background-color:#3584f7;background-color:rgba(var(--pv-color-primary-rgb), 1);color:white;color:rgba(var(--pv-color-light-rgb), 1)}.button_label{-webkit-transition:opacity 200ms;transition:opacity 200ms}.button:hover .button_label{opacity:0.7}";
+
+const Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fill = 'stroke';
+    this.handleClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (this.onClick) {
+        this.onClick(event);
+      }
+    };
+  }
+  render() {
+    const isLink = !!this.href;
+    const TagType = isLink ? 'a' : 'button';
+    return (h(TagType, { class: {
+        button: true,
+        button_stroke: this.fill === 'stroke',
+        button_fill: this.fill === 'fill',
+        button_disabled: this.disabled,
+      }, disabled: this.disabled, type: !isLink && 'button', href: isLink && this.href, target: isLink && this.target ? this.target : null, rel: isLink && 'noreferrer noopener', onClick: this.handleClick, part: "base" }, h("span", { part: "label", class: "button_label" }, h("slot", null))));
+  }
+};
+Button.style = buttonCss;
+
+const buttonSplitCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{display:inline-block;vertical-align:top;position:relative;white-space:nowrap;font-size:0}.button_split_icon{width:7px;height:5px;display:inline-block;vertical-align:middle}.button_split_with_icon{width:25px;border-bottom-left-radius:0;border-top-left-radius:0}.button_split_with_icon.m_open::part(base):before{position:fixed;width:100%;height:100%;top:0;left:0;content:\"\"}.button_split_action{width:100%}.button_split_container{position:absolute;bottom:calc(100% + 1px);left:0;width:100%;border-radius:2px;-webkit-box-shadow:0px -2px 1px rgb(var(--pv-color-light-rgb)), 0px 0px 10px rgba(var(--pv-color-dark-rgb), 0.0241168);box-shadow:0px -2px 1px rgb(var(--pv-color-light-rgb)), 0px 0px 10px rgba(var(--pv-color-dark-rgb), 0.0241168);z-index:1}.button_split>peculiar-button:first-of-type::part(base){border-top-right-radius:0;border-bottom-right-radius:0}.button_split>peculiar-button:last-of-type::part(base){border-top-left-radius:0;border-bottom-left-radius:0}.button_split>peculiar-button:not(:first-child){margin-left:-1px}";
+
+const ButtonSplit = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fill = 'stroke';
+    this.actions = [];
+    this.open = false;
+    this.onClickSplitButton = (event) => {
+      event.stopPropagation();
+      this.open = !this.open;
+    };
+  }
+  onClickActiveButton(action, event) {
+    this.open = false;
+    action(event);
+  }
+  renderActiveSplitState() {
+    if (!this.open) {
+      return null;
+    }
+    return (h("div", { class: "button_split_container" }, this.actions.map((action) => (h("peculiar-button", { fill: "fill", class: "button_split_action", onClick: this.onClickActiveButton.bind(this, action.onClick) }, action.text)))));
+  }
+  render() {
+    return (h("div", { class: {
+        button_split: true,
+      } }, h("peculiar-button", { fill: this.fill, onClick: this.onClick }, h("slot", null)), h("peculiar-button", { fill: this.fill, onClick: this.onClickSplitButton, class: {
+        button_split_with_icon: true,
+        m_open: this.open,
+      } }, h("svg", { viewBox: "0 0 7 5", xmlns: "http://www.w3.org/2000/svg", class: "button_split_icon" }, h("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }))), this.renderActiveSplitState()));
+  }
+};
+ButtonSplit.style = buttonSplitCss;
+
+const linkCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;display:inline-block}.link{font-family:\"Open Sans\", \"Arial\", sans-serif;font-family:var(--pv-font-family);letter-spacing:0.03em;letter-spacing:var(--pv-letter-spacing-normal);line-height:1.4;line-height:var(--pv-line-height-normal);color:#3584f7;color:rgba(var(--pv-color-primary-rgb), 1);font-weight:400;margin:0;padding:0;word-break:break-all}.link_type_h4{font-size:17px;font-size:var(--pv-font-size-h4);font-weight:600}.link_type_h6{font-size:15px;font-size:var(--pv-font-size-h6);font-weight:600}.link_type_h7{font-size:14px;font-size:var(--pv-font-size-h7);font-weight:600}.link_type_b1{font-size:15px;font-size:var(--pv-font-size-b1)}.link_type_b3{font-size:13px;font-size:var(--pv-font-size-b3)}.link:hover{text-decoration:none}";
+
+const Link = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Typography type.
+     */
+    this.type = 'b3';
+  }
+  render() {
+    return (h("a", { href: this.href, target: "_blank", rel: "noreferrer noopener", class: {
+        link: true,
+        [`link_type_${this.type || 'b3'}`]: true,
+      } }, h("slot", null)));
+  }
+};
+Link.style = linkCss;
+
+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 TextHider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.textExpand = createEvent(this, "textExpand", 7);
+    this.opened = false;
+  }
+  textExpandHandler() {
+    this.opened = !this.opened;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "root" }, h("div", { class: {
+        text: true,
+        m_opened: this.opened,
+      } }, h("slot", null)), h("div", { class: "action" }, h("peculiar-button", { onClick: this.textExpand.emit, class: {
+        button_action: true,
+        m_opened: this.opened,
+      }, fill: this.opened ? 'fill' : 'stroke' }, h("svg", { viewBox: "0 0 7 5", xmlns: "http://www.w3.org/2000/svg", class: "expand_icon" }, 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" })))))));
+  }
+};
+TextHider.style = textHiderCss;
+
+const typographyCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;display:block}.typography{font-family:\"Open Sans\", \"Arial\", sans-serif;font-family:var(--pv-font-family);letter-spacing:0.03em;letter-spacing:var(--pv-letter-spacing-normal);line-height:1.4;line-height:var(--pv-line-height-normal);font-weight:400;margin:0;padding:0;display:block}.typography_type_h4{font-size:17px;font-size:var(--pv-font-size-h4);font-weight:600}.typography_type_h6{font-size:15px;font-size:var(--pv-font-size-h6);font-weight:600}.typography_type_h7{font-size:14px;font-size:var(--pv-font-size-h7);font-weight:600}.typography_type_b1{font-size:15px;font-size:var(--pv-font-size-b1)}.typography_type_b3{font-size:13px;font-size:var(--pv-font-size-b3)}.typography_color_dark{color:#2a3134;color:rgba(var(--pv-color-dark-rgb), 1)}.typography_color_light{color:white;color:rgba(var(--pv-color-light-rgb), 1)}.typography_color_grey_3{color:#d1d5d9;color:rgba(var(--pv-color-grey_3-rgb), 1)}.typography_color_grey_5{color:#869196;color:rgba(var(--pv-color-grey_5-rgb), 1)}.typography_color_attention{color:#f7a831;color:rgba(var(--pv-color-attention-rgb), 1)}.typography_color_primary{color:#3584f7;color:rgba(var(--pv-color-primary-rgb), 1)}.typography_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typography_monospace{font-family:monospace}.typography_align_left{text-align:left}.typography_align_center{text-align:center}.typography_align_right{text-align:right}";
+
+const PeculiarTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Typography type.
+     */
+    this.type = 'b3';
+    /**
+     * Component color from theme.
+     */
+    this.color = 'dark';
+  }
+  render() {
+    const TagType = this.type && this.type.includes('h') ? this.type : 'p';
+    return (h(TagType, { class: {
+        typography: true,
+        [`typography_type_${this.type || 'b3'}`]: true,
+        [`typography_color_${this.color || 'dark'}`]: true,
+        [`typography_align_${this.align}`]: !!this.align,
+        typography_ellipsis: this.ellipsis,
+        typography_monospace: this.monospace,
+      } }, h("slot", null)));
+  }
+};
+PeculiarTypography.style = typographyCss;
+
+export { Button as peculiar_button, ButtonSplit as peculiar_button_split, Link as peculiar_link, TextHider as peculiar_text_hider, PeculiarTypography as peculiar_typography };

package/dist/esm/peculiar-certificate-decoder.entry.js

@@ -0,0 +1,169 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-bbd484d9.js';
+import { i as isPem, a as isX509Pem, b as isPkcs10Pem, c as isX509AttributePem } from './certification_request-c0674647.js';
+import './l10n-ac28fa92.js';
+import { X as X509Certificate } from './x509_certificate-12f6d344.js';
+import { X as X509AttributeCertificate } from './x509_attribute_certificate-a6d4aa15.js';
+import { C as CSR } from './csr-c1b6a176.js';
+import './index-0ba131b0.js';
+import './_commonjsHelpers-bfbd2ad8.js';
+
+/**
+ * @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.
+ */
+/**
+ * Read file as Binary string
+ *
+ * @example
+ * ```js
+ *    const file = new File(['file'], 'file.pdf', { type: 'text/plain' });
+ *    readAsBinaryString(file)
+ *      .then(result => console.log('Readed success', result))
+ *      .catch(err => console.log('An error occured when reading file', err));
+ * ```
+ */
+function readAsBinaryString(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve({
+      value: reader.result,
+      fileName: file.name,
+      fileSize: file.size,
+      sourceMime: file.type,
+    });
+    reader.onerror = () => reject(reader.error);
+    reader.readAsBinaryString(file);
+  });
+}
+
+const certificateDecoderCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;display:block;width:100%;font-size:0}.textarea{min-height:300px;width:100%;border-radius:3px;border-width:1px;border-style:solid;padding:14px;font-family:monospace;resize:vertical;background-color:white;background-color:rgba(var(--pv-color-light-rgb), 1);border-color:#d1d5d9;border-color:rgba(var(--pv-color-grey_3-rgb), 1);color:#2a3134;color:rgba(var(--pv-color-dark-rgb), 1);letter-spacing:0.03em;letter-spacing:var(--pv-letter-spacing-normal);font-size:14px;font-size:var(--pv-font-size-h7)}.controls{margin-top:10px}.button{position:relative}.button:not(:first-child){margin-left:10px}.viewer{margin-top:64px}.input_file{opacity:0;width:100%;height:100%;top:0;left:0;display:block;position:absolute}";
+
+const CertificateDecoder = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.successParse = createEvent(this, "successParse", 7);
+    this.clearCertificate = createEvent(this, "clearCertificate", 7);
+    this.onClickDecode = () => {
+      const { value } = this.inputPaste;
+      if (value) {
+        this.decode(value);
+      }
+    };
+    this.onClickExample = () => {
+      this.decode(this.certificateExample);
+    };
+    this.onClickClear = () => {
+      this.clearValue();
+    };
+    this.onChangeInputFile = async (e) => {
+      const element = e.target;
+      if (element.files) {
+        const file = await readAsBinaryString(element.files[0]);
+        if (typeof file.value === 'string') {
+          this.decode(file.value);
+        }
+        element.value = '';
+      }
+    };
+    this.onDropFile = async (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const element = e.dataTransfer;
+      if (element.files) {
+        const file = await readAsBinaryString(element.files[0]);
+        if (typeof file.value === 'string') {
+          this.decode(file.value);
+        }
+      }
+    };
+  }
+  componentDidLoad() {
+    if (this.defaultCertificate) {
+      /**
+       * Prevent Stencil warning about re-render
+       */
+      setTimeout(() => this.decode(this.defaultCertificate), 100);
+    }
+  }
+  clearValue() {
+    this.inputPaste.value = '';
+    this.certificateDecoded = null;
+    this.clearCertificate.emit();
+  }
+  setValue(value) {
+    this.certificateDecoded = value;
+    this.inputPaste.value = value.exportAsPemFormatted();
+    this.successParse.emit(value.exportAsBase64());
+  }
+  decode(certificate) {
+    const isPem$1 = isPem(certificate);
+    const isX509Pem$1 = isX509Pem(certificate);
+    const isPkcs10Pem$1 = isPkcs10Pem(certificate);
+    const isX509AttributePem$1 = isX509AttributePem(certificate);
+    let decoded;
+    let decodeError;
+    if (isPem$1 && !(isX509Pem$1 || isX509AttributePem$1 || isPkcs10Pem$1)) {
+      this.clearValue();
+      alert('Unsupported file type. Please try to use Certificate/AttributeCertificate/CertificateRequest.');
+      return;
+    }
+    try {
+      if (isX509Pem$1) {
+        decoded = new X509Certificate(certificate);
+      }
+      if (isX509AttributePem$1) {
+        decoded = new X509AttributeCertificate(certificate);
+      }
+      if (isPkcs10Pem$1) {
+        decoded = new CSR(certificate);
+      }
+    }
+    catch (error) {
+      decodeError = error;
+    }
+    if (!decoded) {
+      try {
+        decoded = new X509Certificate(certificate);
+      }
+      catch (error) {
+        decodeError = error;
+      }
+    }
+    if (!decoded) {
+      try {
+        decoded = new X509AttributeCertificate(certificate);
+      }
+      catch (error) {
+        decodeError = error;
+      }
+    }
+    if (!decoded) {
+      try {
+        decoded = new CSR(certificate);
+      }
+      catch (error) {
+        decodeError = error;
+      }
+    }
+    if (!decoded) {
+      this.clearValue();
+      console.log(decodeError);
+      alert('Error decoding file. Please try to use Certificate/AttributeCertificate/CertificateRequest.');
+    }
+    else {
+      this.setValue(decoded);
+    }
+  }
+  render() {
+    return (h(Host, null, h("textarea", { placeholder: "Certificate DER or PEM", class: "textarea", ref: (el) => { this.inputPaste = el; }, onDrop: this.onDropFile }), h("div", { class: "controls" }, h("peculiar-button", { fill: "fill", class: "button", onClick: this.onClickDecode }, "Decode"), h("peculiar-button", { class: "button" }, "Choose file", h("input", { type: "file", class: "input_file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,.csr,.req", onChange: this.onChangeInputFile, value: "" })), h("peculiar-button", { class: "button", onClick: this.onClickClear }, "Clear"), this.certificateExample && (h("peculiar-button", { class: "button", onClick: this.onClickExample }, "Example"))), this.certificateDecoded instanceof X509Certificate && (h("peculiar-certificate-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true })), this.certificateDecoded instanceof X509AttributeCertificate && (h("peculiar-attribute-certificate-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true })), this.certificateDecoded instanceof CSR && (h("peculiar-csr-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true }))));
+  }
+};
+CertificateDecoder.style = certificateDecoderCss;
+
+export { CertificateDecoder as peculiar_certificate_decoder };

package/dist/esm/peculiar-certificate-summary_3.entry.js

@@ -2,7 +2,7 @@
  * © Peculiar Ventures https://peculiarventures.com/ - MIT License
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-bbd484d9.js';
-import { l as l10n, a as dateShort } from './l10n-9ac63748.js';
+import { l as l10n, a as dateShort } from './l10n-ac28fa92.js';
 import './_commonjsHelpers-bfbd2ad8.js';
 
 const certificateSummaryCss = ":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%}td{border:none;padding:0}table{width:100%;border-spacing:0;border-collapse:collapse}td{vertical-align:top;padding-top:5px;padding-bottom:5px}table td:first-child{width:130px;padding-right:10px}table td:last-child{width:calc(100% - 130px)}@media (max-width: 900px){table,tr,td{display:block}table td:last-child,table td:first-child{width:100%}}";

package/dist/esm/peculiar-certificate-viewer.entry.js

@@ -0,0 +1,120 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { h, r as registerInstance, H as Host } from './index-bbd484d9.js';
+import { X as X509Certificate } from './x509_certificate-12f6d344.js';
+import './certification_request-c0674647.js';
+import './index-0ba131b0.js';
+import { l as l10n } from './l10n-ac28fa92.js';
+import { a as RowTitle, R as RowValue, B as BasicInformation, e as SubjectName, P as PublicKey, S as Signature, T as Thumbprints, E as Extensions, b as getLEILink, c as getDNSNameLink, d as getIPAddressLink, M as Miscellaneous } from './public_key-38c9ddc8.js';
+import './_commonjsHelpers-bfbd2ad8.js';
+import './csr-c1b6a176.js';
+import './download-735fb2eb.js';
+
+/**
+ * @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 IssuerName = (props) => {
+  const { name, issuerDnLink } = props;
+  const title = l10n.getString('issuerName');
+  return [
+    h(RowTitle, { value: issuerDnLink ? (h("peculiar-link", { href: issuerDnLink, type: "h6" }, title)) : title }),
+    name.map((n) => (h(RowValue, { name: n.name || n.type, value: n.value }))),
+  ];
+};
+
+const certificateViewerCss = ":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;position:relative;min-width:280px;min-height:300px;background:white;background:rgba(var(--pv-color-light-rgb), 1)}th,td{border:none}table{width:100%;margin-bottom:30px;border-spacing:0;border-collapse:collapse}table .title td{border-color:rgba(209, 213, 217, 0.5);border-color:rgba(var(--pv-color-grey_3-rgb), 0.5);padding-top:60px;padding-bottom:15px;border-bottom-width:1px;border-bottom-style:solid}table td:first-child{padding-left:30px;width:130px;padding-right:10px}table td:last-child{padding-right:30px;width:calc(100% - 130px)}table td{vertical-align:top;padding-top:5px;padding-bottom:5px}table td.vertical_align_middle{vertical-align:middle}table .title:first-child td{padding-top:15px}table .title+tr td{padding-top:15px}table td.monospace{max-width:0}table .divider{padding-top:15px;padding-bottom:15px}.divider .bg_fill{background-color:rgba(209, 213, 217, 0.5);background-color:rgba(var(--pv-color-grey_3-rgb), 0.5)}table tr:last-child .divider{padding-top:0;opacity:0}.divider span{display:block;height:1px}.status_wrapper{min-height:inherit;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.interaction_text{padding:15px 0;width:300px;margin:auto;text-align:center}@media (max-width: 900px){table,tr,td{display:block}table td:last-child,table td:first-child{padding-right:15px;padding-left:15px;width:100%}table .title+tr td{padding-top:5px}table .title+tr td:first-child{padding-top:15px}table td.monospace{width:100%;max-width:none}}:host([data-view=mobile]) table,:host([data-view=mobile]) tr,:host([data-view=mobile]) td{display:block}:host([data-view=mobile]) table td:last-child,:host([data-view=mobile]) table td:first-child{padding-right:15px;padding-left:15px;width:100%}:host([data-view=mobile]) table .title+tr td{padding-top:5px}:host([data-view=mobile]) table .title+tr td:first-child{padding-top:15px}:host([data-view=mobile]) table td.monospace{width:100%;max-width:none}";
+
+const CertificateViewer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isDecodeInProcess = true;
+    this.getAuthKeyIdParentLink = (value) => {
+      var _a;
+      return (_a = this.authKeyIdParentLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
+    };
+    this.getAuthKeyIdSiblingsLink = (value) => {
+      var _a;
+      return (_a = this.authKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{authKeyId}}', value);
+    };
+    this.getSubjectKeyIdChildrenLink = (value) => {
+      var _a;
+      return (_a = this.subjectKeyIdChildrenLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
+    };
+    this.getSubjectKeyIdSiblingsLink = (value) => {
+      var _a;
+      return (_a = this.subjectKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
+    };
+  }
+  componentWillLoad() {
+    this.decodeCertificate(this.certificate);
+  }
+  async decodeCertificate(certificate) {
+    this.isDecodeInProcess = true;
+    try {
+      if (certificate instanceof X509Certificate) {
+        this.certificateDecoded = certificate;
+      }
+      else if (typeof certificate === 'string') {
+        this.certificateDecoded = new X509Certificate(certificate);
+      }
+      else {
+        return;
+      }
+      this.certificateDecoded.parseExtensions();
+      await this.certificateDecoded.getThumbprint('SHA-1');
+      await this.certificateDecoded.getThumbprint('SHA-256');
+    }
+    catch (error) {
+      this.certificateDecodeError = error;
+      console.error('Error certificate parse:', error);
+    }
+    this.isDecodeInProcess = false;
+  }
+  /**
+   * Rerun decodeCertificate if previuos value not equal current value
+   */
+  watchCertificateAndDecode(newValue, oldValue) {
+    if (typeof newValue === 'string' && typeof oldValue === 'string') {
+      if (newValue !== oldValue) {
+        this.decodeCertificate(newValue);
+      }
+      return;
+    }
+    if (newValue instanceof X509Certificate && oldValue instanceof X509Certificate) {
+      if (newValue.serialNumber !== oldValue.serialNumber) {
+        this.decodeCertificate(newValue);
+      }
+    }
+  }
+  getIssuerDnLink() {
+    return this.issuerDnLink;
+  }
+  // eslint-disable-next-line class-methods-use-this
+  renderErrorState() {
+    return (h("div", { class: "status_wrapper" }, h("peculiar-typography", { type: "b1", class: "interaction_text" }, "There was an error decoding this certificate.")));
+  }
+  // eslint-disable-next-line class-methods-use-this
+  renderEmptyState() {
+    return (h("div", { class: "status_wrapper" }, h("peculiar-typography", { type: "b1", class: "interaction_text" }, "There is no certificate available.")));
+  }
+  render() {
+    if (this.certificateDecodeError) {
+      return this.renderErrorState();
+    }
+    if (!this.certificateDecoded) {
+      return this.renderEmptyState();
+    }
+    return (h(Host, { "data-view": this.view }, h("table", null, h(BasicInformation, Object.assign({}, this.certificateDecoded)), h(SubjectName, { name: this.certificateDecoded.subject }), h(IssuerName, { name: this.certificateDecoded.issuer, issuerDnLink: this.getIssuerDnLink() }), h(PublicKey, { publicKey: this.certificateDecoded.publicKey }), h(Signature, { signature: this.certificateDecoded.signature }), h(Thumbprints, { thumbprints: this.certificateDecoded.thumbprints }), h(Extensions, { extensions: this.certificateDecoded.extensions, getLEILink: getLEILink, getDNSNameLink: getDNSNameLink, getIPAddressLink: getIPAddressLink, getAuthKeyIdParentLink: this.getAuthKeyIdParentLink, getAuthKeyIdSiblingsLink: this.getAuthKeyIdSiblingsLink, getSubjectKeyIdChildrenLink: this.getSubjectKeyIdChildrenLink, getSubjectKeyIdSiblingsLink: this.getSubjectKeyIdSiblingsLink }), this.download && (h(Miscellaneous, { certificate: this.certificateDecoded })))));
+  }
+  static get watchers() { return {
+    "certificate": ["watchCertificateAndDecode"]
+  }; }
+};
+CertificateViewer.style = certificateViewerCss;
+
+export { CertificateViewer as peculiar_certificate_viewer };

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

@@ -2,9 +2,11 @@
  * © Peculiar Ventures https://peculiarventures.com/ - MIT License
  */
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-bbd484d9.js';
-import { as as X509Certificate, O as OIDs } from './certification_request-3402a181.js';
-import { D as Download } from './download-cf68ac2c.js';
-import { l as l10n } from './l10n-9ac63748.js';
+import { X as X509Certificate } from './x509_certificate-12f6d344.js';
+import { O as OIDs } from './certification_request-c0674647.js';
+import './index-0ba131b0.js';
+import { l as l10n } from './l10n-ac28fa92.js';
+import { D as Download } from './download-735fb2eb.js';
 import './_commonjsHelpers-bfbd2ad8.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}}";

package/dist/esm/peculiar.js

@@ -69,5 +69,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["peculiar-attribute-certificate-viewer_9",[[1,"peculiar-certificate-decoder",{"certificateExample":[1,"certificate-example"],"certificateDecoded":[32]}],[1,"peculiar-attribute-certificate-viewer",{"certificate":[1],"download":[4],"authKeyIdParentLink":[513,"auth-key-id-parent-link"],"authKeyIdSiblingsLink":[513,"auth-key-id-siblings-link"],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"isDecodeInProcess":[32]}],[1,"peculiar-csr-viewer",{"certificate":[513],"download":[4],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"view":[513],"isDecodeInProcess":[32]}],[1,"peculiar-certificate-viewer",{"certificate":[513],"download":[516],"authKeyIdParentLink":[513,"auth-key-id-parent-link"],"authKeyIdSiblingsLink":[513,"auth-key-id-siblings-link"],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"issuerDnLink":[513,"issuer-dn-link"],"view":[513],"isDecodeInProcess":[32]}],[1,"peculiar-button-split",{"onClick":[16],"fill":[1],"actions":[16],"open":[32]}],[1,"peculiar-text-hider",{"opened":[1540]},[[0,"textExpand","textExpandHandler"]]],[1,"peculiar-link",{"href":[513],"type":[513]}],[1,"peculiar-typography",{"type":[513],"color":[1],"align":[1],"ellipsis":[4],"monospace":[4]}],[1,"peculiar-button",{"fill":[1],"disabled":[516],"href":[1],"target":[1],"onClick":[16]}]]],["peculiar-certificate-summary_3",[[1,"peculiar-certificate-summary",{"certificate":[16],"showIssuer":[4,"show-issuer"]}],[1,"peculiar-circular-progress",{"size":[2],"width":[2]}],[1,"peculiar-highlight-words",{"search":[1]}]]],["peculiar-certificates-viewer",[[1,"peculiar-certificates-viewer",{"certificates":[16],"filterWithSearch":[4,"filter-with-search"],"highlightWithSearch":[4,"highlight-with-search"],"search":[32],"certificatesDecoded":[32],"expandedRow":[32],"certificateSelectedForDetails":[32],"isDecodeInProcess":[32]}]]]], options);
+  return bootstrapLazy([["peculiar-button_5",[[1,"peculiar-button-split",{"onClick":[16],"fill":[1],"actions":[16],"open":[32]}],[1,"peculiar-text-hider",{"opened":[1540]},[[0,"textExpand","textExpandHandler"]]],[1,"peculiar-link",{"href":[513],"type":[513]}],[1,"peculiar-typography",{"type":[513],"color":[1],"align":[1],"ellipsis":[4],"monospace":[4]}],[1,"peculiar-button",{"fill":[1],"disabled":[516],"href":[1],"target":[1],"onClick":[16]}]]],["peculiar-certificates-viewer",[[1,"peculiar-certificates-viewer",{"certificates":[16],"filterWithSearch":[4,"filter-with-search"],"highlightWithSearch":[4,"highlight-with-search"],"search":[32],"certificatesDecoded":[32],"expandedRow":[32],"certificateSelectedForDetails":[32],"isDecodeInProcess":[32]}]]],["peculiar-attribute-certificate-viewer_2",[[1,"peculiar-attribute-certificate-viewer",{"certificate":[1],"download":[4],"authKeyIdParentLink":[513,"auth-key-id-parent-link"],"authKeyIdSiblingsLink":[513,"auth-key-id-siblings-link"],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"isDecodeInProcess":[32]}],[1,"peculiar-csr-viewer",{"certificate":[513],"download":[4],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"view":[513],"isDecodeInProcess":[32]}]]],["peculiar-certificate-viewer",[[1,"peculiar-certificate-viewer",{"certificate":[513],"download":[516],"authKeyIdParentLink":[513,"auth-key-id-parent-link"],"authKeyIdSiblingsLink":[513,"auth-key-id-siblings-link"],"subjectKeyIdChildrenLink":[513,"subject-key-id-children-link"],"subjectKeyIdSiblingsLink":[513,"subject-key-id-siblings-link"],"issuerDnLink":[513,"issuer-dn-link"],"view":[513],"isDecodeInProcess":[32]}]]],["peculiar-certificate-decoder",[[1,"peculiar-certificate-decoder",{"certificateExample":[1,"certificate-example"],"defaultCertificate":[1,"default-certificate"],"certificateDecoded":[32]}]]],["peculiar-certificate-summary_3",[[1,"peculiar-certificate-summary",{"certificate":[16],"showIssuer":[4,"show-issuer"]}],[1,"peculiar-circular-progress",{"size":[2],"width":[2]}],[1,"peculiar-highlight-words",{"search":[1]}]]]], options);
 });