@peculiar/certificates-viewer 4.7.1-alpha.5 → 4.9.0

package/dist/collection/components/certificate-decoder/certificate-decoder.js.map

@@ -1 +1 @@
-{"version":3,"file":"certificate-decoder.js","sourceRoot":"","sources":["../../../src/components/certificate-decoder/certificate-decoder.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Host,\n  h,\n  State,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { readAsBinaryString } from '../../utils';\nimport {\n  X509Certificate,\n  X509AttributeCertificate,\n  Pkcs10CertificateRequest,\n  X509Crl,\n  X509Certificates,\n  SshCertificate,\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() certificateToDecode?: string;\n\n  @State() certificateDecoded: X509Certificates\n    | X509Certificate\n    | X509AttributeCertificate\n    | Pkcs10CertificateRequest\n    | X509Crl\n    | SshCertificate;\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.certificateToDecode) {\n      /**\n       * Prevent Stencil warning about re-render\n       */\n      setTimeout(() => this.decode(this.certificateToDecode), 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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  async setValue(value: typeof this.certificateDecoded) {\n    this.certificateDecoded = value;\n\n    this.inputPaste.value = await value.toString('pem');\n    this.successParse.emit(await value.toString('base64url'));\n  }\n\n  async decode(value: string) {\n    new Promise<X509Certificates>((resolve) => {\n      resolve(new X509Certificates(value));\n    })\n      .catch(() => new X509Certificate(value))\n      .catch(() => new X509AttributeCertificate(value))\n      .catch(() => new Pkcs10CertificateRequest(value))\n      .catch(() => new X509Crl(value))\n      .catch(() => new SshCertificate(value))\n      .then((res: typeof this.certificateDecoded) => this.setValue(res))\n      .catch((error) => {\n        console.log(error);\n\n        alert(`Error decoding certificate:\\n\"${value}\"\\n\\nPlease try to use Certificate/AttributeCertificate/CertificateRequest/CRL.`);\n      });\n  }\n\n  renderCertificate() {\n    if (this.certificateDecoded instanceof X509Certificates) {\n      return (\n        <peculiar-certificate-chain-viewer\n          certificates={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Certificate) {\n      return (\n        <peculiar-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509AttributeCertificate) {\n      return (\n        <peculiar-attribute-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof Pkcs10CertificateRequest) {\n      return (\n        <peculiar-csr-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Crl) {\n      return (\n        <peculiar-crl-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof SshCertificate) {\n      return (\n        <peculiar-ssh-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    return null;\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,.pub\"\n              value=\"\"\n              onChange={this.handleChangeInputFile}\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.renderCertificate()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"certificate-decoder.js","sourceRoot":"","sources":["../../../src/components/certificate-decoder/certificate-decoder.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Host,\n  h,\n  State,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { readAsBinaryString } from '../../utils';\nimport {\n  X509Certificate,\n  X509AttributeCertificate,\n  Pkcs10CertificateRequest,\n  X509Crl,\n  X509Certificates,\n  SshCertificate,\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() certificateToDecode?: string;\n\n  @State() certificateDecoded: X509Certificates\n    | X509Certificate\n    | X509AttributeCertificate\n    | Pkcs10CertificateRequest\n    | X509Crl\n    | SshCertificate;\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.certificateToDecode) {\n      /**\n       * Prevent Stencil warning about re-render\n       */\n      setTimeout(() => this.decode(this.certificateToDecode), 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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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  async setValue(value: typeof this.certificateDecoded) {\n    this.certificateDecoded = value;\n\n    this.inputPaste.value = await value.toString('pem');\n    this.successParse.emit(await value.toString('base64url'));\n  }\n\n  async decode(value: string) {\n    new Promise<X509Certificates>((resolve) => {\n      resolve(new X509Certificates(value));\n    })\n      .catch(() => new X509Certificate(value))\n      .catch(() => new X509AttributeCertificate(value))\n      .catch(() => new Pkcs10CertificateRequest(value))\n      .catch(() => new X509Crl(value))\n      .catch(() => new SshCertificate(value))\n      .then((res: typeof this.certificateDecoded) => this.setValue(res))\n      .catch((error) => {\n        console.log(error);\n\n        alert(`Error decoding certificate:\\n\"${value}\"\\n\\nPlease try to use Certificate/AttributeCertificate/CertificateRequest/CRL.`);\n      });\n  }\n\n  renderCertificate() {\n    if (this.certificateDecoded instanceof X509Certificates) {\n      return (\n        <peculiar-certificate-chain-viewer\n          certificates={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Certificate) {\n      return (\n        <peculiar-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509AttributeCertificate) {\n      return (\n        <peculiar-attribute-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof Pkcs10CertificateRequest) {\n      return (\n        <peculiar-csr-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof X509Crl) {\n      return (\n        <peculiar-crl-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    if (this.certificateDecoded instanceof SshCertificate) {\n      return (\n        <peculiar-ssh-certificate-viewer\n          certificate={this.certificateDecoded}\n          download\n        />\n      );\n    }\n\n    return null;\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,.pub\"\n              value=\"\"\n              onChange={this.handleChangeInputFile}\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.renderCertificate()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/certificate-details-parts/extensions/certificate_transparency_extension.js

@@ -17,7 +17,7 @@ export const CertificateTransparencyExtension = (props) => {
     const { extension } = props;
     return (h(BasicExtension, { extension: extension }, Boolean(extension.value.items.length) && ([
         h(RowValue, { name: "Signed Certificate Timestamps", value: "" }),
-        extension.value.toJSON().map((signedCertificateTimestamp) => (h(TableRowTable, null, h(RowValue, { name: "Version", value: signedCertificateTimestamp.version + 1 }), h(RowValue, { name: "Log Operator", value: logs[signedCertificateTimestamp.logId] || signedCertificateTimestamp.logId }), h(RowValue, { name: "Log Key ID", value: signedCertificateTimestamp.logId, monospace: true }), h(RowValue, { name: "Timestamp", value: dateShort(signedCertificateTimestamp.timestamp) }), h(RowValue, { name: "Signature Algorithm", value: `${signedCertificateTimestamp.hashAlgorithm} ${signedCertificateTimestamp.signatureAlgorithm}`.toUpperCase() }), h(RowValue, { name: "Signature", value: signedCertificateTimestamp.signature, monospace: true })))),
+        extension.value.toJSON().map((signedCertificateTimestamp) => (h(TableRowTable, null, h(RowValue, { name: "Version", value: signedCertificateTimestamp.version + 1 }), h(RowValue, { name: "Log Operator", value: logs[signedCertificateTimestamp.logId] || signedCertificateTimestamp.logId }), h(RowValue, { name: "Log Key ID", value: signedCertificateTimestamp.logId, monospace: true }), h(RowValue, { name: "Timestamp", value: dateShort(signedCertificateTimestamp.timestamp) }), h(RowValue, { name: "Signature Algorithm", value: `${signedCertificateTimestamp.hashAlgorithm} ${signedCertificateTimestamp.signatureAlgorithm}`.toUpperCase() }), h(RowValue, { name: "Signature", value: signedCertificateTimestamp.signature, monospace: true }), h(RowValue, { name: "Extensions", value: signedCertificateTimestamp.extensions || undefined, monospace: true })))),
     ])));
 };
 //# sourceMappingURL=certificate_transparency_extension.js.map

package/dist/collection/components/certificate-details-parts/extensions/certificate_transparency_extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"certificate_transparency_extension.js","sourceRoot":"","sources":["../../../../src/components/certificate-details-parts/extensions/certificate_transparency_extension.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAGvD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,MAAM,CAAC,MAAM,gCAAgC,GACiB,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,CACL,EAAC,cAAc,IACb,SAAS,EAAE,SAAS,IAEnB,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACzC,EAAC,QAAQ,IACP,IAAI,EAAC,+BAA+B,EACpC,KAAK,EAAC,EAAE,GACR;QACF,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAC3D,EAAC,aAAa;YACZ,EAAC,QAAQ,IACP,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,0BAA0B,CAAC,OAAO,GAAG,CAAC,GAC7C;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,IAAI,0BAA0B,CAAC,KAAK,GACjF;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,0BAA0B,CAAC,KAAK,EACvC,SAAS,SACT;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,SAAS,CAAC,0BAA0B,CAAC,SAAS,CAAC,GACtD;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,GAAG,0BAA0B,CAAC,aAAa,IAAI,0BAA0B,CAAC,kBAAkB,EAAE,CAAC,WAAW,EAAE,GACnH;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,0BAA0B,CAAC,SAAS,EAC3C,SAAS,SACT,CACY,CACjB,CAAC;KACH,CAAC,CACa,CAClB,CAAC;AACJ,CAAC,CAAC","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 { h, FunctionalComponent } from '@stencil/core';\nimport type { CertificateTransparency } from '@peculiar/asn1-cert-transparency';\nimport type { Extension } from '../../../crypto/extension';\nimport logs from '../../../constants/logs';\nimport { dateShort } from '../../../utils';\nimport { RowValue, TableRowTable } from '../row';\nimport { BasicExtension } from './basic_extension';\n\ninterface ICertificateTransparencyExtensionProps {\n  extension: Extension<CertificateTransparency>;\n}\n\nexport const CertificateTransparencyExtension:\nFunctionalComponent<ICertificateTransparencyExtensionProps> = (props) => {\n  const { extension } = props;\n\n  return (\n    <BasicExtension\n      extension={extension}\n    >\n      {Boolean(extension.value.items.length) && ([\n        <RowValue\n          name=\"Signed Certificate Timestamps\"\n          value=\"\"\n        />,\n        extension.value.toJSON().map((signedCertificateTimestamp) => (\n          <TableRowTable>\n            <RowValue\n              name=\"Version\"\n              value={signedCertificateTimestamp.version + 1}\n            />\n            <RowValue\n              name=\"Log Operator\"\n              value={logs[signedCertificateTimestamp.logId] || signedCertificateTimestamp.logId}\n            />\n            <RowValue\n              name=\"Log Key ID\"\n              value={signedCertificateTimestamp.logId}\n              monospace\n            />\n            <RowValue\n              name=\"Timestamp\"\n              value={dateShort(signedCertificateTimestamp.timestamp)}\n            />\n            <RowValue\n              name=\"Signature Algorithm\"\n              value={`${signedCertificateTimestamp.hashAlgorithm} ${signedCertificateTimestamp.signatureAlgorithm}`.toUpperCase()}\n            />\n            <RowValue\n              name=\"Signature\"\n              value={signedCertificateTimestamp.signature}\n              monospace\n            />\n          </TableRowTable>\n        )),\n      ])}\n    </BasicExtension>\n  );\n};\n"]}
+{"version":3,"file":"certificate_transparency_extension.js","sourceRoot":"","sources":["../../../../src/components/certificate-details-parts/extensions/certificate_transparency_extension.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAGvD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,MAAM,CAAC,MAAM,gCAAgC,GACiB,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,CACL,EAAC,cAAc,IACb,SAAS,EAAE,SAAS,IAEnB,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACzC,EAAC,QAAQ,IACP,IAAI,EAAC,+BAA+B,EACpC,KAAK,EAAC,EAAE,GACR;QACF,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAC3D,EAAC,aAAa;YACZ,EAAC,QAAQ,IACP,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,0BAA0B,CAAC,OAAO,GAAG,CAAC,GAC7C;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,IAAI,0BAA0B,CAAC,KAAK,GACjF;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,0BAA0B,CAAC,KAAK,EACvC,SAAS,SACT;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,SAAS,CAAC,0BAA0B,CAAC,SAAS,CAAC,GACtD;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,GAAG,0BAA0B,CAAC,aAAa,IAAI,0BAA0B,CAAC,kBAAkB,EAAE,CAAC,WAAW,EAAE,GACnH;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,0BAA0B,CAAC,SAAS,EAC3C,SAAS,SACT;YACF,EAAC,QAAQ,IACP,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,0BAA0B,CAAC,UAAU,IAAI,SAAS,EACzD,SAAS,SACT,CACY,CACjB,CAAC;KACH,CAAC,CACa,CAClB,CAAC;AACJ,CAAC,CAAC","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 { h, FunctionalComponent } from '@stencil/core';\nimport type { CertificateTransparency } from '@peculiar/asn1-cert-transparency';\nimport type { Extension } from '../../../crypto/extension';\nimport logs from '../../../constants/logs';\nimport { dateShort } from '../../../utils';\nimport { RowValue, TableRowTable } from '../row';\nimport { BasicExtension } from './basic_extension';\n\ninterface ICertificateTransparencyExtensionProps {\n  extension: Extension<CertificateTransparency>;\n}\n\nexport const CertificateTransparencyExtension:\nFunctionalComponent<ICertificateTransparencyExtensionProps> = (props) => {\n  const { extension } = props;\n\n  return (\n    <BasicExtension\n      extension={extension}\n    >\n      {Boolean(extension.value.items.length) && ([\n        <RowValue\n          name=\"Signed Certificate Timestamps\"\n          value=\"\"\n        />,\n        extension.value.toJSON().map((signedCertificateTimestamp) => (\n          <TableRowTable>\n            <RowValue\n              name=\"Version\"\n              value={signedCertificateTimestamp.version + 1}\n            />\n            <RowValue\n              name=\"Log Operator\"\n              value={logs[signedCertificateTimestamp.logId] || signedCertificateTimestamp.logId}\n            />\n            <RowValue\n              name=\"Log Key ID\"\n              value={signedCertificateTimestamp.logId}\n              monospace\n            />\n            <RowValue\n              name=\"Timestamp\"\n              value={dateShort(signedCertificateTimestamp.timestamp)}\n            />\n            <RowValue\n              name=\"Signature Algorithm\"\n              value={`${signedCertificateTimestamp.hashAlgorithm} ${signedCertificateTimestamp.signatureAlgorithm}`.toUpperCase()}\n            />\n            <RowValue\n              name=\"Signature\"\n              value={signedCertificateTimestamp.signature}\n              monospace\n            />\n            <RowValue\n              name=\"Extensions\"\n              value={signedCertificateTimestamp.extensions || undefined}\n              monospace\n            />\n          </TableRowTable>\n        )),\n      ])}\n    </BasicExtension>\n  );\n};\n"]}

package/dist/collection/components/certificate-details-parts/extensions/qc_statements_extension.js

@@ -19,7 +19,7 @@ import { BasicExtension } from "./basic_extension";
 export const QCStatementsExtension = (props) => {
     const { extension } = props;
     function renderStatementInfo(statementId, statementInfo) {
-        if (!statementInfo.byteLength) {
+        if (!statementInfo || !statementInfo.byteLength) {
             return null;
         }
         if (statementId === id_qcs_pkixQCSyntax_v2) {

package/dist/collection/components/certificate-details-parts/extensions/qc_statements_extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"qc_statements_extension.js","sourceRoot":"","sources":["../../../../src/components/certificate-details-parts/extensions/qc_statements_extension.tsx"],"names":[],"mappings":"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","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 { h, FunctionalComponent } from '@stencil/core';\nimport {\n  QCStatements,\n  id_qcs_pkixQCSyntax_v2,\n  SemanticsInformation,\n} from '@peculiar/asn1-x509-qualified';\nimport {\n  id_etsi_qcs_qcType,\n  QcType,\n  id_etsi_qcs_qcPDS,\n  PdsLocations,\n  id_etsi_qcs_qcRetentionPeriod,\n  QcEuRetentionPeriod,\n} from '@peculiar/asn1-x509-qualified-etsi';\nimport { AsnParser } from '@peculiar/asn1-schema';\nimport { Convert } from 'pvtsutils';\nimport { getStringByOID } from '../../../utils';\nimport { Extension } from '../../../crypto/extension';\nimport { RowValue, TableRowTable } from '../row';\nimport { BasicExtension } from './basic_extension';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ninterface IQCStatementsExtensionProps {\n  extension: Extension<QCStatements>;\n}\n\nexport const QCStatementsExtension: FunctionalComponent<IQCStatementsExtensionProps> = (props) => {\n  const { extension } = props;\n\n  function renderStatementInfo(statementId: string, statementInfo: ArrayBuffer) {\n    if (!statementInfo.byteLength) {\n      return null;\n    }\n\n    if (statementId === id_qcs_pkixQCSyntax_v2) {\n      const semanticsInformation = AsnParser.parse(statementInfo, SemanticsInformation);\n\n      return (\n        <RowValue\n          name=\"Semantics Identifier\"\n          value={getStringByOID(semanticsInformation.semanticsIdentifier)}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcType) {\n      const qcTypes = AsnParser.parse(statementInfo, QcType);\n\n      return (\n        <RowValue\n          name=\"QC Types\"\n          value={qcTypes.map((type) => getStringByOID(type)).join(', ')}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcRetentionPeriod) {\n      const retentionPeriod = AsnParser.parse(statementInfo, QcEuRetentionPeriod);\n\n      return (\n        <RowValue\n          name=\"Retention Period\"\n          value={`${retentionPeriod.value} years`}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcPDS) {\n      const pdsLocations = AsnParser.parse(statementInfo, PdsLocations);\n\n      return ([\n        <RowValue\n          name=\"PDS Locations\"\n          value=\"\"\n        />,\n        pdsLocations.map((location) => (\n          <TableRowTable>\n            <RowValue\n              name=\"URL\"\n              value={location.url}\n            />\n            <RowValue\n              name=\"Language\"\n              value={location.language}\n            />\n          </TableRowTable>\n        )),\n      ]);\n    }\n\n    return (\n      <RowValue\n        name=\"Info\"\n        value={Convert.ToHex(statementInfo)}\n        monospace\n      />\n    );\n  }\n\n  return (\n    <BasicExtension\n      extension={extension}\n    >\n      {Boolean(extension.value.length) && ([\n        <RowValue\n          name=\"Statements\"\n          value=\"\"\n        />,\n        extension.value.map((statement) => (\n          <TableRowTable>\n            <RowValue\n              name=\"Statement ID\"\n              value={getStringByOID(statement.statementId)}\n            />\n            {renderStatementInfo(statement.statementId, statement.statementInfo)}\n          </TableRowTable>\n        )),\n      ])}\n    </BasicExtension>\n  );\n};\n"]}
+{"version":3,"file":"qc_statements_extension.js","sourceRoot":"","sources":["../../../../src/components/certificate-details-parts/extensions/qc_statements_extension.tsx"],"names":[],"mappings":"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","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 { h, FunctionalComponent } from '@stencil/core';\nimport {\n  QCStatements,\n  id_qcs_pkixQCSyntax_v2,\n  SemanticsInformation,\n} from '@peculiar/asn1-x509-qualified';\nimport {\n  id_etsi_qcs_qcType,\n  QcType,\n  id_etsi_qcs_qcPDS,\n  PdsLocations,\n  id_etsi_qcs_qcRetentionPeriod,\n  QcEuRetentionPeriod,\n} from '@peculiar/asn1-x509-qualified-etsi';\nimport { AsnParser } from '@peculiar/asn1-schema';\nimport { Convert } from 'pvtsutils';\nimport { getStringByOID } from '../../../utils';\nimport { Extension } from '../../../crypto/extension';\nimport { RowValue, TableRowTable } from '../row';\nimport { BasicExtension } from './basic_extension';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ninterface IQCStatementsExtensionProps {\n  extension: Extension<QCStatements>;\n}\n\nexport const QCStatementsExtension: FunctionalComponent<IQCStatementsExtensionProps> = (props) => {\n  const { extension } = props;\n\n  function renderStatementInfo(statementId: string, statementInfo?: ArrayBuffer) {\n    if (!statementInfo || !statementInfo.byteLength) {\n      return null;\n    }\n\n    if (statementId === id_qcs_pkixQCSyntax_v2) {\n      const semanticsInformation = AsnParser.parse(statementInfo, SemanticsInformation);\n\n      return (\n        <RowValue\n          name=\"Semantics Identifier\"\n          value={getStringByOID(semanticsInformation.semanticsIdentifier)}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcType) {\n      const qcTypes = AsnParser.parse(statementInfo, QcType);\n\n      return (\n        <RowValue\n          name=\"QC Types\"\n          value={qcTypes.map((type) => getStringByOID(type)).join(', ')}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcRetentionPeriod) {\n      const retentionPeriod = AsnParser.parse(statementInfo, QcEuRetentionPeriod);\n\n      return (\n        <RowValue\n          name=\"Retention Period\"\n          value={`${retentionPeriod.value} years`}\n        />\n      );\n    }\n\n    if (statementId === id_etsi_qcs_qcPDS) {\n      const pdsLocations = AsnParser.parse(statementInfo, PdsLocations);\n\n      return ([\n        <RowValue\n          name=\"PDS Locations\"\n          value=\"\"\n        />,\n        pdsLocations.map((location) => (\n          <TableRowTable>\n            <RowValue\n              name=\"URL\"\n              value={location.url}\n            />\n            <RowValue\n              name=\"Language\"\n              value={location.language}\n            />\n          </TableRowTable>\n        )),\n      ]);\n    }\n\n    return (\n      <RowValue\n        name=\"Info\"\n        value={Convert.ToHex(statementInfo)}\n        monospace\n      />\n    );\n  }\n\n  return (\n    <BasicExtension\n      extension={extension}\n    >\n      {Boolean(extension.value.length) && ([\n        <RowValue\n          name=\"Statements\"\n          value=\"\"\n        />,\n        extension.value.map((statement) => (\n          <TableRowTable>\n            <RowValue\n              name=\"Statement ID\"\n              value={getStringByOID(statement.statementId)}\n            />\n            {renderStatementInfo(statement.statementId, statement.statementInfo)}\n          </TableRowTable>\n        )),\n      ])}\n    </BasicExtension>\n  );\n};\n"]}

package/dist/collection/components/certificate-viewer/certificate-viewer.css

@@ -423,13 +423,13 @@
   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);
+  height: calc(var(--pv-size-base) * 6);
+  min-width: calc(var(--pv-size-base) * 6);
+  padding: 0 calc(var(--pv-size-base) * 2);
   transition: background-color 200ms ease 0s;
   align-items: center;
   justify-content: center;
-  gap: var(--pv-size-base-2);
+  gap: calc(var(--pv-size-base) * 2);
   font-size: 0;
 }
 .button.m_no_padding {
@@ -468,7 +468,7 @@ table tr:last-child .divider {
   display: none;
 }
 table td {
-  padding: var(--pv-size-base-2) var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 2) calc(var(--pv-size-base) * 4);
   vertical-align: top;
 }
 table td:first-child {
@@ -481,7 +481,7 @@ table td.monospace {
   max-width: 0;
 }
 table td.divider {
-  padding: var(--pv-size-base-2) 0;
+  padding: calc(var(--pv-size-base) * 2) 0;
 }
 table td.divider span {
   height: 1px;
@@ -489,8 +489,8 @@ table td.divider span {
   background-color: var(--pv-color-gray-4);
 }
 table .title td {
-  padding-top: var(--pv-size-base-6);
-  padding-bottom: var(--pv-size-base-2);
+  padding-top: calc(var(--pv-size-base) * 6);
+  padding-bottom: calc(var(--pv-size-base) * 2);
 }
 table table {
   border-left: 1px solid var(--pv-color-gray-5);
@@ -507,16 +507,16 @@ table table {
   display: block;
 }
 :host([data-mobile-screen-view=true]) table tr {
-  padding: var(--pv-size-base-2) 0;
+  padding: calc(var(--pv-size-base) * 2) 0;
 }
 :host([data-mobile-screen-view=true]) table tr.title {
-  padding-top: var(--pv-size-base-6);
+  padding-top: calc(var(--pv-size-base) * 6);
 }
 :host([data-mobile-screen-view=true]) table tr.title td {
-  padding: 0 var(--pv-size-base-4);
+  padding: 0 calc(var(--pv-size-base) * 4);
 }
 :host([data-mobile-screen-view=true]) table td {
-  padding: 0 var(--pv-size-base-4);
+  padding: 0 calc(var(--pv-size-base) * 4);
   width: 100% !important;
   max-width: 100% !important;
 }

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

@@ -128,7 +128,6 @@ export class CertificateViewer {
         return {
             "certificate": {
                 "type": "string",
-                "attribute": "certificate",
                 "mutable": false,
                 "complexType": {
                     "original": "TCertificateProp",
@@ -136,7 +135,7 @@ export class CertificateViewer {
                     "references": {
                         "TCertificateProp": {
                             "location": "local",
-                            "path": "/Users/donskov/Documents/work/pv/pv-certificates-viewer/packages/webcomponents/src/components/certificate-viewer/certificate-viewer.tsx",
+                            "path": "/Users/donskov/Documents/GitHub/pv-certificates-viewer/packages/webcomponents/src/components/certificate-viewer/certificate-viewer.tsx",
                             "id": "src/components/certificate-viewer/certificate-viewer.tsx::TCertificateProp"
                         }
                     }
@@ -149,11 +148,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "certificate"
             },
             "download": {
                 "type": "boolean",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -168,11 +167,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "download"
             },
             "authKeyIdParentLink": {
                 "type": "string",
-                "attribute": "auth-key-id-parent-link",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -190,11 +189,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "auth-key-id-parent-link"
             },
             "authKeyIdSiblingsLink": {
                 "type": "string",
-                "attribute": "auth-key-id-siblings-link",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -212,11 +211,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "auth-key-id-siblings-link"
             },
             "subjectKeyIdChildrenLink": {
                 "type": "string",
-                "attribute": "subject-key-id-children-link",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -234,11 +233,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "subject-key-id-children-link"
             },
             "subjectKeyIdSiblingsLink": {
                 "type": "string",
-                "attribute": "subject-key-id-siblings-link",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -256,11 +255,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "subject-key-id-siblings-link"
             },
             "issuerDnLink": {
                 "type": "string",
-                "attribute": "issuer-dn-link",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -275,11 +274,11 @@ export class CertificateViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "issuer-dn-link"
             },
             "mobileMediaQueryString": {
                 "type": "string",
-                "attribute": "mobile-media-query-string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -298,6 +297,7 @@ export class CertificateViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "mobile-media-query-string",
                 "defaultValue": "'(max-width: 900px)'"
             }
         };

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

@@ -423,13 +423,13 @@
   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);
+  height: calc(var(--pv-size-base) * 6);
+  min-width: calc(var(--pv-size-base) * 6);
+  padding: 0 calc(var(--pv-size-base) * 2);
   transition: background-color 200ms ease 0s;
   align-items: center;
   justify-content: center;
-  gap: var(--pv-size-base-2);
+  gap: calc(var(--pv-size-base) * 2);
   font-size: 0;
 }
 .button.m_no_padding {
@@ -455,16 +455,16 @@
 }
 
 .search_section {
-  padding: var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 4);
   border-bottom: 1px solid var(--pv-color-gray-4);
 }
 
 .input_search {
-  height: var(--pv-size-base-8);
+  height: calc(var(--pv-size-base) * 8);
   width: 100%;
   outline: none;
   background-color: var(--pv-color-gray-1);
-  padding: 0 var(--pv-size-base-2);
+  padding: 0 calc(var(--pv-size-base) * 2);
   border: 1px solid var(--pv-color-gray-7);
   border-radius: 4px;
   transition: background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;
@@ -486,20 +486,20 @@ table td, table th {
 }
 table td:first-child, table th:first-child {
   padding-right: 0;
-  width: var(--pv-size-base-10);
+  width: calc(var(--pv-size-base) * 10);
 }
 table td:last-child, table th:last-child {
   padding-left: 0;
-  width: var(--pv-size-base-10);
+  width: calc(var(--pv-size-base) * 10);
 }
 table th {
-  padding: var(--pv-size-base-2) var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 2) calc(var(--pv-size-base) * 4);
 }
 table th.col_action {
   padding: 0;
 }
 table td {
-  padding: var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 4);
 }
 table tr.m_expanded {
   background: var(--pv-color-gray-1);
@@ -515,7 +515,7 @@ table tr.expanded_summary table {
 }
 table tr.expanded_summary table td {
   border-bottom: none;
-  padding: var(--pv-size-base-2);
+  padding: calc(var(--pv-size-base) * 2);
 }
 table tr.expanded_summary table td:first-child {
   width: 200px;
@@ -530,7 +530,7 @@ table tr.expanded_summary table td:last-child {
 
 .status_wrapper {
   text-align: center;
-  height: var(--pv-size-base-16);
+  height: calc(var(--pv-size-base) * 16);
   vertical-align: middle;
 }
 
@@ -564,7 +564,7 @@ table tr.expanded_summary table td:last-child {
   display: flex;
   max-height: calc(100% - 60px);
   flex-direction: column;
-  margin: var(--pv-size-base-6);
+  margin: calc(var(--pv-size-base) * 6);
   position: relative;
   outline: none;
   box-shadow: var(--pv-shadow-dark-hight);
@@ -576,12 +576,12 @@ table tr.expanded_summary table td:last-child {
 }
 
 .modal_header {
-  padding: var(--pv-size-base-3) var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 3) calc(var(--pv-size-base) * 4);
   display: flex;
   flex: 0 0 auto;
   -webkit-box-pack: justify;
   justify-content: space-between;
-  gap: var(--pv-size-base-2);
+  gap: calc(var(--pv-size-base) * 2);
   border-bottom: 1px solid var(--pv-color-gray-5);
 }
 
@@ -600,22 +600,22 @@ table tr.expanded_summary table td:last-child {
   display: none;
 }
 :host([data-mobile-screen-view=true]) table tr {
-  padding: var(--pv-size-base-2) 0;
+  padding: calc(var(--pv-size-base) * 2) 0;
 }
 :host([data-mobile-screen-view=true]) table .expanded_summary {
   padding: 0;
 }
 :host([data-mobile-screen-view=true]) table .certificate_row {
   border-bottom: 1px solid var(--pv-color-gray-5);
-  padding: var(--pv-size-base-2) var(--pv-size-base-4);
+  padding: calc(var(--pv-size-base) * 2) calc(var(--pv-size-base) * 4);
 }
 :host([data-mobile-screen-view=true]) table .certificate_row_actions {
-  padding-top: var(--pv-size-base-6);
+  padding-top: calc(var(--pv-size-base) * 6);
 }
 :host([data-mobile-screen-view=true]) table .certificate_row_actions td {
   display: flex;
   justify-content: right;
-  gap: var(--pv-size-base-4);
+  gap: calc(var(--pv-size-base) * 4);
 }
 :host([data-mobile-screen-view=true]) .button_table_cell {
   margin-top: 0;

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

@@ -294,7 +294,6 @@ export class CertificatesViewer {
         return {
             "certificates": {
                 "type": "unknown",
-                "attribute": "certificates",
                 "mutable": false,
                 "complexType": {
                     "original": "ICertificate[]",
@@ -302,7 +301,7 @@ export class CertificatesViewer {
                     "references": {
                         "ICertificate": {
                             "location": "local",
-                            "path": "/Users/donskov/Documents/work/pv/pv-certificates-viewer/packages/webcomponents/src/components/certificates-viewer/certificates-viewer.tsx",
+                            "path": "/Users/donskov/Documents/GitHub/pv-certificates-viewer/packages/webcomponents/src/components/certificates-viewer/certificates-viewer.tsx",
                             "id": "src/components/certificates-viewer/certificates-viewer.tsx::ICertificate"
                         }
                     }
@@ -319,7 +318,6 @@ export class CertificatesViewer {
             },
             "filterWithSearch": {
                 "type": "boolean",
-                "attribute": "filter-with-search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,11 +333,11 @@ export class CertificatesViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "filter-with-search",
                 "defaultValue": "true"
             },
             "highlightWithSearch": {
                 "type": "boolean",
-                "attribute": "highlight-with-search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -355,11 +353,11 @@ export class CertificatesViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "highlight-with-search",
                 "defaultValue": "true"
             },
             "mobileMediaQueryString": {
                 "type": "string",
-                "attribute": "mobile-media-query-string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -378,6 +376,7 @@ export class CertificatesViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "mobile-media-query-string",
                 "defaultValue": "'(max-width: 900px)'"
             }
         };