@peculiar/certificates-viewer 3.10.1 → 4.0.1

package/dist/esm/peculiar-button-menu_3.entry.js

@@ -0,0 +1,104 @@
+/*!
+ * © Peculiar Ventures https://peculiarventures.com/ - MIT License
+ */
+import { h, r as registerInstance, H as Host, g as getElement } from './index-4079bbb5.js';
+import { T as Typography, B as Button } from './button-35146bdd.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 ActionsIcon = (props) => {
+  const { color = 'gray-10' } = props;
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" },
+    h("path", { fill: `var(--pv-color-${color})`, d: "M15 13.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" })));
+};
+
+const buttonMenuCss = ".sc-peculiar-button-menu-h{display:-ms-inline-flexbox;display:inline-flex;position:relative}.is_shown.sc-peculiar-button-menu-h .button_popover.sc-peculiar-button-menu:before{position:fixed;width:100%;height:100%;top:0;left:0;content:\"\"}.is_shown.sc-peculiar-button-menu-h .popover.sc-peculiar-button-menu{display:block}.popover.sc-peculiar-button-menu{min-width:200px;position:absolute;top:100%;right:0;border-radius:4px;z-index:1;-webkit-box-shadow:var(--pv-shadow-light-medium);box-shadow:var(--pv-shadow-light-medium);background:var(--pv-color-white);padding:var(--pv-size-base-2) 0;margin:var(--pv-size-base) 0;display:none}.button_option.sc-peculiar-button-menu{width:100%;-ms-flex-pack:start;justify-content:flex-start;border-radius:0}.group.sc-peculiar-button-menu:not(:last-child){border-bottom:1px solid var(--pv-color-gray-5);padding-bottom:var(--pv-size-base-2);margin-bottom:var(--pv-size-base)}.group_title.sc-peculiar-button-menu{line-height:var(--pv-size-base-6);padding:0 var(--pv-size-base-2)}";
+
+const ButtonMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.handleClick = () => {
+      this.open = !this.open;
+    };
+    this.groups = [];
+    this.open = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        is_shown: this.open,
+      } }, h(Button, { class: "button_popover", onClick: this.handleClick, startIcon: h(ActionsIcon, null) }), h("div", { role: "dialog", tabIndex: -1, class: "popover", "aria-hidden": String(this.open) }, this.groups.map((group) => (h("div", { class: "group" }, h(Typography, { variant: "c2", color: "gray-9", class: "group_title" }, group.title), group.options.map((option) => (h(Button, { class: "button_option", startIcon: option.startIcon, href: option.href, onClick: (event) => {
+        event.stopPropagation();
+        this.handleClick();
+        if (option.onClick) {
+          option.onClick(event);
+        }
+      } }, option.text)))))))));
+  }
+};
+ButtonMenu.style = buttonMenuCss;
+
+const circularProgressCss = ":host{display:block;width:100%}@-webkit-keyframes circular-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes circular-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes circular-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:100, 200;stroke-dashoffset:-15}to{stroke-dasharray:100, 200;stroke-dashoffset:-120}}@keyframes circular-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:100, 200;stroke-dashoffset:-15}to{stroke-dasharray:100, 200;stroke-dashoffset:-120}}.circle_progress{margin:0 auto}.circle_progress_svg{-webkit-animation:circular-rotate 1.4s linear infinite;animation:circular-rotate 1.4s linear infinite}.circle_progress_circle{stroke-linecap:round;-webkit-animation:circular-dash 1.4s ease-in-out infinite;animation:circular-dash 1.4s ease-in-out infinite;stroke-dasharray:80, 200;stroke-dashoffset:0;stroke:var(--pv-color-secondary)}.circle_progress_backdrop{stroke:var(--pv-color-gray-3)}";
+
+const CircularProgress = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.box = 50;
+    this.size = 24;
+    this.width = 4;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "circle_progress", style: {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+      } }, h("svg", { class: "circle_progress_svg", viewBox: `0 0 ${this.box} ${this.box}` }, h("circle", { class: "circle_progress_backdrop", cx: this.box / 2, cy: this.box / 2, r: (this.box / 2) - 5, fill: "none", style: {
+        strokeWidth: `${this.width}px`,
+      } }), h("circle", { class: "circle_progress_circle", cx: this.box / 2, cy: this.box / 2, r: (this.box / 2) - 5, fill: "none", style: {
+        strokeWidth: `${this.width}px`,
+      } })))));
+  }
+};
+CircularProgress.style = circularProgressCss;
+
+const highlightWordsCss = ":host{display:inline}::slotted(mark){background-color:var(--pv-color-attention-tint-4)}";
+
+const HighlightWords = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tag = 'mark';
+    this.search = undefined;
+  }
+  componentDidLoad() {
+    this.handleHighlightSearch();
+  }
+  componentDidUpdate() {
+    this.handleHighlightSearch();
+  }
+  handleHighlightSearch() {
+    const basicString = this.resetHighlightSearch(this.host.innerHTML);
+    let result = basicString;
+    if (this.search) {
+      const substring = new RegExp(`(${this.search})`, 'gi');
+      result = basicString.replace(substring, `<${this.tag}>$1</${this.tag}>`);
+    }
+    this.host.innerHTML = result;
+  }
+  resetHighlightSearch(source) {
+    // eslint-disable-next-line no-useless-escape
+    const substring = new RegExp(`<\/?${this.tag}>`, 'g');
+    return source.replace(substring, '');
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+HighlightWords.style = highlightWordsCss;
+
+export { ButtonMenu as peculiar_button_menu, CircularProgress as peculiar_circular_progress, HighlightWords as peculiar_highlight_words };
+
+//# sourceMappingURL=peculiar-button-menu_3.entry.js.map

package/dist/esm/peculiar-button-menu_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"peculiar-button-menu.peculiar-circular-progress.peculiar-highlight-words.entry.js","mappings":";;;;;;AAAA;;;;;;;AAWO,MAAM,WAAW,GAA+C,CAAC,KAAK;EAC3E,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;EAEpC,QACE,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM;IAEX,YACE,IAAI,EAAE,kBAAkB,KAAK,GAAG,EAChC,CAAC,EAAC,2GAA2G,GAC7G,CACE,EACN;AACJ,CAAC;;AC3BD,MAAM,aAAa,GAAG,u/BAAu/B;;MCiChgC,UAAU;;;IAKrB,gBAAW,GAAG;MACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB,CAAC;kBANkC,EAAE;gBAEb,KAAK;;EAM9B,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,IAED,EAAC,MAAM,IACL,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,EAAC,WAAW,OAAG,GAC1B,EACF,WACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,SAAS,iBACF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,MACrB,WAAK,KAAK,EAAC,OAAO,IAChB,EAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,aAAa,IAElB,KAAK,CAAC,KAAK,CACD,EACZ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACxB,EAAC,MAAM,IACL,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,OAAO,EAAE,CAAC,KAAK;QACb,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,MAAM,CAAC,OAAO,EAAE;UAClB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACvB;OACF,IAEA,MAAM,CAAC,IAAI,CACL,CACV,CAAC,CACE,CACP,CAAC,CACE,CACD,EACP;GACH;;;;AC5FH,MAAM,mBAAmB,GAAG,0/BAA0/B;;MCoBzgC,gBAAgB;;;IAWnB,QAAG,GAAW,EAAE,CAAC;gBAPF,EAAE;iBAKD,CAAC;;EAIzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;OACzB,IAED,WACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,IAEtC,cACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAChB,EAAE,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAChB,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;OAC/B,GACD,EACF,cACE,KAAK,EAAC,wBAAwB,EAC9B,EAAE,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAChB,EAAE,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAChB,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;OAC/B,GACD,CACE,CACF,CACD,EACP;GACH;;;;ACvEH,MAAM,iBAAiB,GAAG,yFAAyF;;MCiBtG,cAAc;;;IAKjB,QAAG,GAAW,MAAM,CAAC;;;EAE7B,gBAAgB;IACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,kBAAkB;IAChB,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,qBAAqB;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnE,IAAI,MAAM,GAAG,WAAW,CAAC;IAEzB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,IAAI,CAAC,CAAC;MAEvD,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;KAC1E;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;GAC9B;EAED,oBAAoB,CAAC,MAAc;;IAEjC,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;GACtC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["src/components/icons/actions.tsx","src/components/button-menu/button-menu.scss?tag=peculiar-button-menu&encapsulation=scoped","src/components/button-menu/button-menu.tsx","src/components/circular-progress/circular-progress.scss?tag=peculiar-circular-progress&encapsulation=shadow","src/components/circular-progress/circular-progress.tsx","src/components/highlight-words/highlight-words.scss?tag=peculiar-highlight-words&encapsulation=shadow","src/components/highlight-words/highlight-words.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 { ColorType } from '../../interface';\n\nexport const ActionsIcon: FunctionalComponent<{ color?: ColorType }> = (props) => {\n  const { color = 'gray-10' } = props;\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"30\"\n      height=\"31\"\n      fill=\"none\"\n    >\n      <path\n        fill={`var(--pv-color-${color})`}\n        d=\"M15 13.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z\"\n      />\n    </svg>\n  );\n};\n",":host {\n  display: inline-flex;\n  position: relative;\n\n  &.is_shown {\n    .button_popover {\n      &:before {\n        position: fixed;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        content: '';\n      }\n    }\n\n    .popover {\n      display: block;\n    }\n  }\n}\n\n.popover {\n  min-width: 200px;\n  position: absolute;\n  top: 100%;\n  right: 0;\n  border-radius: 4px;\n  z-index: 1;\n  box-shadow: var(--pv-shadow-light-medium);\n  background: var(--pv-color-white);\n  padding: var(--pv-size-base-2) 0;\n  margin: var(--pv-size-base) 0;\n  display: none;\n}\n\n.button_option {\n  width: 100%;\n  justify-content: flex-start;\n  border-radius: 0;\n}\n\n.group {\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--pv-color-gray-5);\n    padding-bottom: var(--pv-size-base-2);\n    margin-bottom: var(--pv-size-base);\n  }\n}\n\n.group_title {\n  line-height: var(--pv-size-base-6);\n  padding: 0 var(--pv-size-base-2);\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  State,\n  Prop,\n  Host,\n} from '@stencil/core';\nimport { Button, ButtonProps } from '../button';\nimport { Typography } from '../typography';\nimport { ActionsIcon } from '../icons';\n\nexport interface ButtonMenuGroupOptions extends ButtonProps {\n  text: string | string[];\n}\n\nexport interface ButtonMenuGroup {\n  title: string | string[];\n  options: ButtonMenuGroupOptions[];\n}\n\n@Component({\n  tag: 'peculiar-button-menu',\n  styleUrl: 'button-menu.scss',\n  scoped: true,\n})\nexport class ButtonMenu {\n  @Prop() groups: ButtonMenuGroup[] = [];\n\n  @State() open: boolean = false;\n\n  handleClick = () => {\n    this.open = !this.open;\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          is_shown: this.open,\n        }}\n      >\n        <Button\n          class=\"button_popover\"\n          onClick={this.handleClick}\n          startIcon={<ActionsIcon />}\n        />\n        <div\n          role=\"dialog\"\n          tabIndex={-1}\n          class=\"popover\"\n          aria-hidden={String(this.open)}\n        >\n          {this.groups.map((group) => (\n            <div class=\"group\">\n              <Typography\n                variant=\"c2\"\n                color=\"gray-9\"\n                class=\"group_title\"\n              >\n                {group.title}\n              </Typography>\n              {group.options.map((option) => (\n                <Button\n                  class=\"button_option\"\n                  startIcon={option.startIcon}\n                  href={option.href}\n                  onClick={(event) => {\n                    event.stopPropagation();\n\n                    this.handleClick();\n\n                    if (option.onClick) {\n                      option.onClick(event);\n                    }\n                  }}\n                >\n                  {option.text}\n                </Button>\n              ))}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n}\n\n@keyframes circular-rotate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1,200;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100,200;\n    stroke-dashoffset: -15;\n  }\n\n  to {\n    stroke-dasharray: 100,200;\n    stroke-dashoffset: -120;\n  }\n}\n\n.circle_progress {\n  margin: 0 auto;\n}\n\n.circle_progress_svg {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.circle_progress_circle {\n  stroke-linecap: round;\n  animation: circular-dash 1.4s ease-in-out infinite;\n  stroke-dasharray: 80,200;\n  stroke-dashoffset: 0;\n  stroke: var(--pv-color-secondary);\n}\n\n.circle_progress_backdrop {\n  stroke: var(--pv-color-gray-3);\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  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'peculiar-circular-progress',\n  styleUrl: 'circular-progress.scss',\n  shadow: true,\n})\nexport class CircularProgress {\n  /**\n   * Width/height of progress circle.\n   */\n  @Prop() size: number = 24;\n\n  /**\n   * Stroke width of progress bar circle.\n   */\n  @Prop() width: number = 4;\n\n  private box: number = 50;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"circle_progress\"\n          style={{\n            width: `${this.size}px`,\n            height: `${this.size}px`,\n          }}\n        >\n          <svg\n            class=\"circle_progress_svg\"\n            viewBox={`0 0 ${this.box} ${this.box}`}\n          >\n            <circle\n              class=\"circle_progress_backdrop\"\n              cx={this.box / 2}\n              cy={this.box / 2}\n              r={(this.box / 2) - 5}\n              fill=\"none\"\n              style={{\n                strokeWidth: `${this.width}px`,\n              }}\n            />\n            <circle\n              class=\"circle_progress_circle\"\n              cx={this.box / 2}\n              cy={this.box / 2}\n              r={(this.box / 2) - 5}\n              fill=\"none\"\n              style={{\n                strokeWidth: `${this.width}px`,\n              }}\n            />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline;\n}\n\n::slotted(mark) {\n  background-color: var(--pv-color-attention-tint-4);\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, Host, h, Element, Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'peculiar-highlight-words',\n  styleUrl: 'highlight-words.scss',\n  shadow: true,\n})\nexport class HighlightWords {\n  @Element() host: HTMLElement;\n\n  @Prop() search: string;\n\n  private tag: string = 'mark';\n\n  componentDidLoad() {\n    this.handleHighlightSearch();\n  }\n\n  componentDidUpdate() {\n    this.handleHighlightSearch();\n  }\n\n  handleHighlightSearch() {\n    const basicString = this.resetHighlightSearch(this.host.innerHTML);\n    let result = basicString;\n\n    if (this.search) {\n      const substring = new RegExp(`(${this.search})`, 'gi');\n\n      result = basicString.replace(substring, `<${this.tag}>$1</${this.tag}>`);\n    }\n\n    this.host.innerHTML = result;\n  }\n\n  resetHighlightSearch(source: string) {\n    // eslint-disable-next-line no-useless-escape\n    const substring = new RegExp(`<\\/?${this.tag}>`, 'g');\n\n    return source.replace(substring, '');\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,12 +1,12 @@
 /*!
  * © 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, d as isX509CRLPem } from './certification_request-23cd5124.js';
-import './l10n-d48f35ff.js';
-import './download-91511aeb.js';
-import { X as X509Certificate } from './x509_certificate-d8e0af2d.js';
-import { X as X509AttributeCertificate, C as CSR, a as CRL } from './crl-7f23c111.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4079bbb5.js';
+import { i as isPem, a as isX509Pem, b as isPkcs10Pem, c as isX509AttributePem, d as isX509CRLPem } from './certification_request-5cadde9f.js';
+import './download-57c5bf8f.js';
+import { X as X509Certificate } from './x509_certificate-dfae6999.js';
+import { X as X509AttributeCertificate, C as CSR, a as CRL } from './crl-11670c3e.js';
+import { T as Typography, B as Button } from './button-35146bdd.js';
 
 /**
  * @license
@@ -40,27 +40,24 @@ function 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 certificateDecoderCss = "*{-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%}.textarea{min-height:300px;width:100%;border-radius:4px;border:1px solid var(--pv-color-gray-5);padding:14px;font-family:monospace;resize:vertical}.viewer{margin-top:var(--pv-size-base-12)}.controls{margin-top:var(--pv-size-base-2);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pv-size-base-2)}.control_row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--pv-size-base)}";
 
 const CertificateDecoder = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.successParse = createEvent(this, "successParse", 7);
     this.clearCertificate = createEvent(this, "clearCertificate", 7);
-    this.onClickDecode = () => {
+    this.handleClickDecode = () => {
       const { value } = this.inputPaste;
       if (value) {
         this.decode(value);
       }
     };
-    this.onClickExample = () => {
-      this.decode(this.certificateExample);
-    };
-    this.onClickClear = () => {
+    this.handleClickClear = () => {
       this.clearValue();
     };
-    this.onChangeInputFile = async (e) => {
-      const element = e.target;
+    this.handleChangeInputFile = async (event) => {
+      const element = event.target;
       if (element.files) {
         const file = await readAsBinaryString(element.files[0]);
         if (typeof file.value === 'string') {
@@ -69,10 +66,18 @@ const CertificateDecoder = class {
         element.value = '';
       }
     };
-    this.onDropFile = async (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const element = e.dataTransfer;
+    this.handleChangeExample = (event) => {
+      if (event.target.value) {
+        this.decode(event.target.value);
+      }
+      else {
+        this.clearValue();
+      }
+    };
+    this.handleDropFile = async (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const element = event.dataTransfer;
       if (element.files) {
         const file = await readAsBinaryString(element.files[0]);
         if (typeof file.value === 'string') {
@@ -80,6 +85,9 @@ const CertificateDecoder = class {
         }
       }
     };
+    this.certificateExamples = undefined;
+    this.defaultCertificate = undefined;
+    this.certificateDecoded = undefined;
   }
   componentDidLoad() {
     if (this.defaultCertificate) {
@@ -171,9 +179,12 @@ const CertificateDecoder = class {
     }
   }
   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,application/pkix-crl,.csr,.req,.crl", 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 })), this.certificateDecoded instanceof CRL && (h("peculiar-crl-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true }))));
+    var _a;
+    return (h(Host, null, h("textarea", { placeholder: "Certificate DER or PEM", class: "textarea t-b2 c-black", ref: (el) => { this.inputPaste = el; }, onDrop: this.handleDropFile }), h("div", { class: "controls" }, h("div", { class: "control_row" }, h(Typography, { variant: "b3", color: "secondary-tint-2" }, "Drag or load file:"), h("input", { type: "file", accept: "application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl", onChange: this.handleChangeInputFile, value: "" })), ((_a = this.certificateExamples) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { class: "control_row" }, h(Typography, { variant: "b3", color: "secondary-tint-2" }, "Load examples:"), h("select", { onChange: this.handleChangeExample }, h("option", { value: "" }, "None"), this.certificateExamples.map((example) => (h("option", { value: example.value }, example.title)))))), h("div", { class: "control_row" }, h(Button, { onClick: this.handleClickDecode }, "Decode"), h(Button, { onClick: this.handleClickClear }, "Clear"))), 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 })), this.certificateDecoded instanceof CRL && (h("peculiar-crl-viewer", { certificate: this.certificateDecoded, class: "viewer", download: true }))));
   }
 };
 CertificateDecoder.style = certificateDecoderCss;
 
 export { CertificateDecoder as peculiar_certificate_decoder };
+
+//# sourceMappingURL=peculiar-certificate-decoder.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"peculiar-certificate-decoder.entry.js","mappings":"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","names":["isPem","validator.isPem","isX509Pem","validator.isX509Pem","isPkcs10Pem","validator.isPkcs10Pem","isX509AttributePem","validator.isX509AttributePem","isX509CRLPem","validator.isX509CRLPem"],"sources":["src/utils/read_file.ts","src/components/certificate-decoder/certificate-decoder.scss?tag=peculiar-certificate-decoder&encapsulation=shadow","src/components/certificate-decoder/certificate-decoder.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\nexport type FileValue = string | ArrayBuffer | null;\nexport interface IFileDataType extends Blob {\n  name?: string;\n  mimeType?: string;\n  lastModified?: number;\n}\nexport interface IReadFileResult {\n  value: FileValue;\n  fileName: string | undefined;\n  fileSize: number | undefined;\n  sourceMime: string | undefined;\n}\n\n/**\n * Read file as Binary string\n *\n * @example\n * ```js\n *    const file = new File(['file'], 'file.pdf', { type: 'text/plain' });\n *    readAsBinaryString(file)\n *      .then(result => console.log('Readed success', result))\n *      .catch(err => console.log('An error occured when reading file', err));\n * ```\n */\n\nexport function readAsBinaryString(file: IFileDataType): Promise<IReadFileResult> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve({\n      value: reader.result,\n      fileName: file.name,\n      fileSize: file.size,\n      sourceMime: file.type,\n    });\n\n    reader.onerror = () => reject(reader.error);\n\n    reader.readAsBinaryString(file);\n  });\n}\n\n/**\n * Read file as ArrayBuffer\n *\n * @example\n * ```js\n *    const file = new File(['file'], 'file.pdf', { type: 'text/plain' });\n *    readAsArrayBuffer(file)\n *      .then(result => console.log('Readed success', result))\n *      .catch(err => console.log('An error occured when reading file', err));\n * ```\n */\n\nexport function readAsArrayBuffer(file: IFileDataType): Promise<IReadFileResult> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve({\n      value: reader.result,\n      fileName: file.name,\n      fileSize: file.size,\n      sourceMime: file.type,\n    });\n\n    reader.onerror = () => reject(reader.error);\n\n    reader.readAsArrayBuffer(file);\n  });\n}\n\n/**\n * Read file as Data URL\n *\n * @example\n * ```js\n *    const file = new File(['file'], 'file.pdf', { type: 'text/plain' });\n *    readAsDataUrl(file)\n *      .then(result => console.log('Readed success', result))\n *      .catch(err => console.log('An error occured when reading file', err));\n * ```\n */\n\nexport function readAsDataUrl(file: IFileDataType): Promise<IReadFileResult> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve({\n      value: reader.result,\n      fileName: file.name,\n      fileSize: file.size,\n      sourceMime: file.type,\n    });\n\n    reader.onerror = () => reject(reader.error);\n\n    reader.readAsDataURL(file);\n  });\n}\n\n/**\n * Read file as Text\n *\n * @example\n * ```js\n *    const file = new File(['file'], 'file.pdf', { type: 'text/plain' });\n *    readAsText(file)\n *      .then(result => console.log('Readed success', result))\n *      .catch(err => console.log('An error occured when reading file', err));\n * ```\n */\n\nexport function readAsText(file: IFileDataType, options?: string): Promise<IReadFileResult> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve({\n      value: reader.result,\n      fileName: file.name,\n      fileSize: file.size,\n      sourceMime: file.type,\n    });\n\n    reader.onerror = () => reject(reader.error);\n\n    reader.readAsText(file, options);\n  });\n}\n","@import '../../css/base.scss';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.textarea {\n  min-height: 300px;\n  width: 100%;\n  border-radius: 4px;\n  border: 1px solid var(--pv-color-gray-5);;\n  padding: 14px;\n  font-family: monospace;\n  resize: vertical;\n}\n\n.viewer {\n  margin-top: var(--pv-size-base-12);\n}\n\n.controls {\n  margin-top: var(--pv-size-base-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--pv-size-base-2);\n}\n\n.control_row {\n  display: flex;\n  align-items: center;\n  gap: var(--pv-size-base);\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  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nimport { validator, readAsBinaryString } from '../../utils';\nimport {\n  X509Certificate,\n  X509AttributeCertificate,\n  CSR,\n  CRL,\n} from '../../crypto';\nimport { Button } from '../button';\nimport { Typography } from '../typography';\n\n@Component({\n  tag: 'peculiar-certificate-decoder',\n  styleUrl: 'certificate-decoder.scss',\n  shadow: true,\n})\nexport class CertificateDecoder {\n  private inputPaste?: HTMLTextAreaElement;\n\n  /**\n   * The example certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() certificateExamples?: {\n    title: string;\n    value: string;\n  }[];\n\n  /**\n   * The default certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop() defaultCertificate?: string;\n\n  @State() certificateDecoded: X509Certificate | X509AttributeCertificate | CSR | CRL;\n\n  /**\n   * Emitted when the certificate has been successfully parsed.\n   */\n  @Event() successParse!: EventEmitter<string>;\n\n  /**\n   * Emitted when the certificate has been removed.\n   */\n  @Event() clearCertificate!: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.defaultCertificate) {\n      /**\n       * Prevent Stencil warning about re-render\n       */\n      setTimeout(() => this.decode(this.defaultCertificate), 100);\n    }\n  }\n\n  private handleClickDecode = () => {\n    const { value } = this.inputPaste;\n\n    if (value) {\n      this.decode(value);\n    }\n  };\n\n  private handleClickClear = () => {\n    this.clearValue();\n  };\n\n  private handleChangeInputFile = async (event: any) => {\n    const element = event.target;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n\n      element.value = '';\n    }\n  };\n\n  private handleChangeExample = (event: any) => {\n    if (event.target.value) {\n      this.decode(event.target.value);\n    } else {\n      this.clearValue();\n    }\n  };\n\n  private handleDropFile = async (event: any) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const element = event.dataTransfer;\n\n    if (element.files) {\n      const file = await readAsBinaryString(element.files[0]);\n\n      if (typeof file.value === 'string') {\n        this.decode(file.value);\n      }\n    }\n  };\n\n  clearValue() {\n    this.inputPaste.value = '';\n    this.certificateDecoded = null;\n    this.clearCertificate.emit();\n  }\n\n  setValue(value: X509Certificate | X509AttributeCertificate | CSR | CRL) {\n    this.certificateDecoded = value;\n    this.inputPaste.value = value.exportAsPemFormatted();\n    this.successParse.emit(value.exportAsBase64());\n  }\n\n  decode(certificate: string) {\n    const isPem = validator.isPem(certificate);\n    const isX509Pem = validator.isX509Pem(certificate);\n    const isPkcs10Pem = validator.isPkcs10Pem(certificate);\n    const isX509AttributePem = validator.isX509AttributePem(certificate);\n    const isX509CRLPem = validator.isX509CRLPem(certificate);\n    let decoded: X509Certificate | X509AttributeCertificate | CSR | CRL;\n    let decodeError: Error;\n\n    if (isPem && !(isX509Pem || isX509AttributePem || isPkcs10Pem || isX509CRLPem)) {\n      this.clearValue();\n\n      alert('Unsupported file type. Please try to use Certificate/AttributeCertificate/CertificateRequest/CRL.');\n\n      return;\n    }\n\n    try {\n      if (isX509Pem) {\n        decoded = new X509Certificate(certificate);\n      }\n\n      if (isX509AttributePem) {\n        decoded = new X509AttributeCertificate(certificate);\n      }\n\n      if (isPkcs10Pem) {\n        decoded = new CSR(certificate);\n      }\n\n      if (isX509CRLPem) {\n        decoded = new CRL(certificate);\n      }\n    } catch (error) {\n      decodeError = error;\n    }\n\n    if (!decoded) {\n      try {\n        decoded = new X509Certificate(certificate);\n      } catch (error) {\n        decodeError = error;\n      }\n    }\n\n    if (!decoded) {\n      try {\n        decoded = new X509AttributeCertificate(certificate);\n      } catch (error) {\n        decodeError = error;\n      }\n    }\n\n    if (!decoded) {\n      try {\n        decoded = new CSR(certificate);\n      } catch (error) {\n        decodeError = error;\n      }\n    }\n\n    if (!decoded) {\n      try {\n        decoded = new CRL(certificate);\n      } catch (error) {\n        decodeError = error;\n      }\n    }\n\n    if (!decoded) {\n      this.clearValue();\n\n      console.log(decodeError);\n      alert('Error decoding file. Please try to use Certificate/AttributeCertificate/CertificateRequest/CRL.');\n    } else {\n      this.setValue(decoded);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <textarea\n          placeholder=\"Certificate DER or PEM\"\n          class=\"textarea t-b2 c-black\"\n          ref={(el) => { this.inputPaste = el; }}\n          onDrop={this.handleDropFile}\n        />\n        <div class=\"controls\">\n          <div class=\"control_row\">\n            <Typography\n              variant=\"b3\"\n              color=\"secondary-tint-2\"\n            >\n              Drag or load file:\n            </Typography>\n            <input\n              type=\"file\"\n              accept=\"application/pkix-cert,application/x-x509-ca-cert,application/x-x509-user-cert,application/pkcs10,application/pkix-crl,.csr,.req,.crl\"\n              onChange={this.handleChangeInputFile}\n              value=\"\"\n            />\n          </div>\n          {this.certificateExamples?.length && (\n            <div class=\"control_row\">\n              <Typography\n                variant=\"b3\"\n                color=\"secondary-tint-2\"\n              >\n                Load examples:\n              </Typography>\n              <select onChange={this.handleChangeExample}>\n                <option value=\"\">None</option>\n                {this.certificateExamples.map((example) => (\n                  <option value={example.value}>\n                    {example.title}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n          <div class=\"control_row\">\n            <Button\n              onClick={this.handleClickDecode}\n            >\n              Decode\n            </Button>\n            <Button\n              onClick={this.handleClickClear}\n            >\n              Clear\n            </Button>\n          </div>\n        </div>\n        {this.certificateDecoded instanceof X509Certificate && (\n          <peculiar-certificate-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof X509AttributeCertificate && (\n          <peculiar-attribute-certificate-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof CSR && (\n          <peculiar-csr-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n        {this.certificateDecoded instanceof CRL && (\n          <peculiar-crl-viewer\n            certificate={this.certificateDecoded}\n            class=\"viewer\"\n            download\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,19 +1,19 @@
 /*!
  * © Peculiar Ventures https://peculiarventures.com/ - MIT License
  */
-import { r as registerInstance, h, H as Host } from './index-bbd484d9.js';
-import { X as X509Certificate } from './x509_certificate-d8e0af2d.js';
-import './certification_request-23cd5124.js';
-import './download-91511aeb.js';
-import './l10n-d48f35ff.js';
-import { B as BasicInformation, f as SubjectName, I as IssuerName, P as PublicKey, S as Signature, b as Thumbprints, E as Extensions, c as getLEILink, d as getDNSNameLink, e as getIPAddressLink, M as Miscellaneous } from './miscellaneous-c7c0d04a.js';
+import { r as registerInstance, h, H as Host } from './index-4079bbb5.js';
+import { X as X509Certificate } from './x509_certificate-dfae6999.js';
+import './certification_request-5cadde9f.js';
+import './download-57c5bf8f.js';
+import { B as BasicInformation, f as SubjectName, I as IssuerName, P as PublicKey, S as Signature, b as Thumbprints, E as Extensions, c as getLEILink, d as getDNSNameLink, e as getIPAddressLink, M as Miscellaneous } from './miscellaneous-1d4e8b41.js';
+import { T as Typography } from './button-35146bdd.js';
+import './download-0cc3077a.js';
 
-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 table{margin-bottom:0}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 certificateViewerCss = "*{-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%;position:relative;min-width:280px;min-height:300px;word-wrap:break-word;word-break:break-word}th,td{border:none}table{width:100%;border-spacing:0;border-collapse:collapse}table td{padding:var(--pv-size-base-2) var(--pv-size-base-4);vertical-align:top}table td:first-child{width:220px}table td:last-child{width:calc(100% - 220px)}table td.monospace{max-width:0}table td.divider{padding:var(--pv-size-base-2) 0}table td.divider span{height:1px;display:block;background-color:var(--pv-color-gray-4)}table .title td{padding-top:var(--pv-size-base-6);padding-bottom:var(--pv-size-base-2)}table table{border-left:1px solid var(--pv-color-gray-5)}.status_wrapper{min-height:inherit;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([data-mobile-screen-view=true]) table,:host([data-mobile-screen-view=true]) tr,:host([data-mobile-screen-view=true]) td{display:block}:host([data-mobile-screen-view=true]) table tr{padding:var(--pv-size-base-2) 0}:host([data-mobile-screen-view=true]) table tr.title{padding-top:var(--pv-size-base-6)}:host([data-mobile-screen-view=true]) table tr.title td{padding:0 var(--pv-size-base-4)}:host([data-mobile-screen-view=true]) table td{padding:0 var(--pv-size-base-4);width:100% !important;max-width:100% !important}:host([data-mobile-screen-view=true]) table td.divider{padding:0}";
 
 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);
@@ -30,9 +30,30 @@ const CertificateViewer = class {
       var _a;
       return (_a = this.subjectKeyIdSiblingsLink) === null || _a === void 0 ? void 0 : _a.replace('{{subjectKeyId}}', value);
     };
+    this.certificate = undefined;
+    this.download = undefined;
+    this.authKeyIdParentLink = undefined;
+    this.authKeyIdSiblingsLink = undefined;
+    this.subjectKeyIdChildrenLink = undefined;
+    this.subjectKeyIdSiblingsLink = undefined;
+    this.issuerDnLink = undefined;
+    this.mobileMediaQueryString = '(max-width: 900px)';
+    this.mobileScreenView = false;
+    this.isDecodeInProcess = true;
+  }
+  handleMediaQueryChange(event) {
+    this.mobileScreenView = event.matches;
   }
   componentWillLoad() {
     this.decodeCertificate(this.certificate);
+    {
+      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));
   }
   async decodeCertificate(certificate) {
     this.isDecodeInProcess = true;
@@ -77,11 +98,11 @@ const CertificateViewer = class {
   }
   // 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.")));
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "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.")));
+    return (h("div", { class: "status_wrapper" }, h(Typography, null, "There is no certificate available.")));
   }
   render() {
     if (this.certificateDecodeError) {
@@ -90,7 +111,7 @@ const CertificateViewer = class {
     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 })))));
+    return (h(Host, { "data-mobile-screen-view": String(this.mobileScreenView) }, 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"]
@@ -99,3 +120,5 @@ const CertificateViewer = class {
 CertificateViewer.style = certificateViewerCss;
 
 export { CertificateViewer as peculiar_certificate_viewer };
+
+//# sourceMappingURL=peculiar-certificate-viewer.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"peculiar-certificate-viewer.entry.js","mappings":"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","names":[],"sources":["src/components/certificate-viewer/certificate-viewer.scss?tag=peculiar-certificate-viewer&encapsulation=shadow","src/components/certificate-viewer/certificate-viewer.tsx"],"sourcesContent":["@import '../../css/base.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  position: relative;\n  min-width: 280px;\n  min-height: 300px;\n  word-wrap: break-word;\n  word-break: break-word;\n}\n\nth, td {\n  border: none;\n}\n\ntable {\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n\n  td {\n    padding: var(--pv-size-base-2) var(--pv-size-base-4);\n    vertical-align: top;\n\n    &:first-child {\n      width: 220px;\n    }\n\n    &:last-child {\n      width: calc(100% - 220px)\n    }\n\n    &.monospace {\n      max-width: 0;\n    }\n\n    &.divider {\n      padding: var(--pv-size-base-2) 0;\n\n      span {\n        height: 1px;\n        display: block;\n        background-color: var(--pv-color-gray-4);\n      }\n    }\n  }\n\n  .title td {\n    padding-top: var(--pv-size-base-6);\n    padding-bottom: var(--pv-size-base-2);\n  }\n\n  table {\n    border-left: 1px solid var(--pv-color-gray-5);\n  }\n}\n\n.status_wrapper {\n  min-height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([data-mobile-screen-view=\"true\"]) {\n  table, tr, td {\n    display: block;\n  }\n\n  table {\n    tr {\n      padding: var(--pv-size-base-2) 0;\n\n      &.title {\n        padding-top: var(--pv-size-base-6);\n\n        td {\n          padding: 0 var(--pv-size-base-4);\n        }\n      }\n    }\n\n    td {\n      padding: 0 var(--pv-size-base-4);\n      width: 100% !important;\n      max-width: 100% !important;\n\n      &.divider {\n        padding: 0;\n      }\n    }\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  Build,\n} from '@stencil/core';\n\nimport {\n  X509Certificate,\n} from '../../crypto';\nimport { getDNSNameLink, getIPAddressLink, getLEILink } from '../../utils/third_party_links';\nimport {\n  BasicInformation,\n  SubjectName,\n  IssuerName,\n  PublicKey,\n  Signature,\n  Thumbprints,\n  Extensions,\n  Miscellaneous,\n} from '../certificate-details-parts';\nimport { Typography } from '../typography';\n\nexport type CertificateProp = string | X509Certificate;\n\n@Component({\n  tag: 'peculiar-certificate-viewer',\n  styleUrl: 'certificate-viewer.scss',\n  shadow: true,\n})\nexport class CertificateViewer {\n  private certificateDecoded: X509Certificate;\n\n  private certificateDecodeError: Error;\n\n  private mobileMediaQuery: MediaQueryList;\n\n  /**\n   * The certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop({ reflect: true }) certificate: CertificateProp;\n\n  /**\n   * If `true` - component will show split-button to download certificate as PEM or DER.\n   */\n  @Prop({ reflect: true }) download?: boolean;\n\n  /**\n   * Authority Key Identifier extension parent link.\n   * <br />\n   * **NOTE**: `{{authKeyId}}` will be replaced to value from the extension.\n   * @example\n   *  https://censys.io/certificates?q=parsed.extensions.subject_key_id:%20{{authKeyId}}\n   */\n  @Prop({ reflect: true }) authKeyIdParentLink?: string;\n\n  /**\n   * Authority Key Identifier extension siblings link.\n   * <br />\n   * **NOTE**: `{{authKeyId}}` will be replaced to value from the extension.\n   * @example\n   *  https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{authKeyId}}\n   */\n  @Prop({ reflect: true }) authKeyIdSiblingsLink?: string;\n\n  /**\n   * Subject Key Identifier extension children link.\n   * <br />\n   * **NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension.\n   * @example\n   *  https://censys.io/certificates?q=parsed.extensions.authority_key_id:%20{{subjectKeyId}}\n   */\n  @Prop({ reflect: true }) subjectKeyIdChildrenLink?: string;\n\n  /**\n   * Subject Key Identifier extension siblings link.\n   * <br />\n   * **NOTE**: `{{subjectKeyId}}` will be replaced to value from the extension.\n   * @example\n   *  https://some.com/{{subjectKeyId}}\n   */\n  @Prop({ reflect: true }) subjectKeyIdSiblingsLink?: string;\n\n  /**\n   * Issuer DN link.\n   * **NOTE**: HTML component attribute must be `issuer-dn-link`.\n   */\n  @Prop({ reflect: true }) issuerDnLink?: string;\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  @State() mobileScreenView: boolean = false;\n\n  @State() isDecodeInProcess: boolean = true;\n\n  private handleMediaQueryChange(event: MediaQueryListEvent) {\n    this.mobileScreenView = event.matches;\n  }\n\n  componentWillLoad() {\n    this.decodeCertificate(this.certificate);\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  private async decodeCertificate(certificate: CertificateProp) {\n    this.isDecodeInProcess = true;\n\n    try {\n      if (certificate instanceof X509Certificate) {\n        this.certificateDecoded = certificate;\n      } else if (typeof certificate === 'string') {\n        this.certificateDecoded = new X509Certificate(certificate);\n      } else {\n        return;\n      }\n\n      this.certificateDecoded.parseExtensions();\n      await this.certificateDecoded.getThumbprint('SHA-1');\n      await this.certificateDecoded.getThumbprint('SHA-256');\n    } catch (error) {\n      this.certificateDecodeError = error;\n\n      console.error('Error certificate parse:', error);\n    }\n\n    this.isDecodeInProcess = false;\n  }\n\n  /**\n   * Rerun decodeCertificate if previuos value not equal current value\n   */\n  @Watch('certificate')\n  watchCertificateAndDecode(newValue: CertificateProp, oldValue: CertificateProp) {\n    if (typeof newValue === 'string' && typeof oldValue === 'string') {\n      if (newValue !== oldValue) {\n        this.decodeCertificate(newValue);\n      }\n\n      return;\n    }\n\n    if (newValue instanceof X509Certificate && oldValue instanceof X509Certificate) {\n      if (newValue.serialNumber !== oldValue.serialNumber) {\n        this.decodeCertificate(newValue);\n      }\n    }\n  }\n\n  private getAuthKeyIdParentLink = (value: string) => this.authKeyIdParentLink\n    ?.replace('{{authKeyId}}', value);\n\n  private getAuthKeyIdSiblingsLink = (value: string) => this.authKeyIdSiblingsLink\n    ?.replace('{{authKeyId}}', value);\n\n  private getSubjectKeyIdChildrenLink = (value: string) => this.subjectKeyIdChildrenLink\n    ?.replace('{{subjectKeyId}}', value);\n\n  private getSubjectKeyIdSiblingsLink = (value: string) => this.subjectKeyIdSiblingsLink\n    ?.replace('{{subjectKeyId}}', value);\n\n  private getIssuerDnLink() {\n    return this.issuerDnLink;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private renderErrorState() {\n    return (\n      <div class=\"status_wrapper\">\n        <Typography>\n          There was an error decoding this certificate.\n        </Typography>\n      </div>\n    );\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private renderEmptyState() {\n    return (\n      <div class=\"status_wrapper\">\n        <Typography>\n          There is no certificate available.\n        </Typography>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.certificateDecodeError) {\n      return this.renderErrorState();\n    }\n\n    if (!this.certificateDecoded) {\n      return this.renderEmptyState();\n    }\n\n    return (\n      <Host\n        data-mobile-screen-view={String(this.mobileScreenView)}\n      >\n        <table>\n          <BasicInformation\n            {...this.certificateDecoded}\n          />\n\n          <SubjectName\n            name={this.certificateDecoded.subject}\n          />\n\n          <IssuerName\n            name={this.certificateDecoded.issuer}\n            issuerDnLink={this.getIssuerDnLink()}\n          />\n\n          <PublicKey\n            publicKey={this.certificateDecoded.publicKey}\n          />\n\n          <Signature\n            signature={this.certificateDecoded.signature}\n          />\n\n          <Thumbprints\n            thumbprints={this.certificateDecoded.thumbprints}\n          />\n\n          <Extensions\n            extensions={this.certificateDecoded.extensions}\n            getLEILink={getLEILink}\n            getDNSNameLink={getDNSNameLink}\n            getIPAddressLink={getIPAddressLink}\n            getAuthKeyIdParentLink={this.getAuthKeyIdParentLink}\n            getAuthKeyIdSiblingsLink={this.getAuthKeyIdSiblingsLink}\n            getSubjectKeyIdChildrenLink={this.getSubjectKeyIdChildrenLink}\n            getSubjectKeyIdSiblingsLink={this.getSubjectKeyIdSiblingsLink}\n          />\n\n          {this.download && (\n            <Miscellaneous\n              certificate={this.certificateDecoded}\n            />\n          )}\n        </table>\n      </Host>\n    );\n  }\n}\n"],"version":3}