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

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

@@ -423,460 +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);
-  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);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  font-family: var(--pv-font-family, inherit);
-}
-
-/**
- * Typography variants.
- */
-.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);
-}
-
-/**
- *
- */
-/**
- * Color variants.
- */
-.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: inline-flex;
-  cursor: pointer;
-  background: transparent;
-  border: 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);
-  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 {
@@ -915,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 {
@@ -928,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;
@@ -936,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);
@@ -954,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;
 }
@@ -980,8 +533,8 @@ table table {
   white-space: nowrap;
   overflow-x: auto;
   border-bottom: 1px solid var(--pv-color-gray-4);
-  padding: 0 var(--pv-size-base-4);
-  margin-bottom: var(--pv-size-base-6);
+  padding: 0 calc(var(--pv-size-base) * 4);
+  margin-bottom: calc(var(--pv-size-base) * 6);
 }
 
 .tab {
@@ -991,9 +544,9 @@ table table {
   box-sizing: border-box;
   border: none;
   border-bottom: 3px solid transparent;
-  min-height: var(--pv-size-base-12);
+  min-height: calc(var(--pv-size-base) * 12);
   height: 100%;
-  padding: 0 var(--pv-size-base-3);
+  padding: 0 calc(var(--pv-size-base) * 3);
   background-color: transparent;
   transition: background-color 200ms, color 200ms, border-color 200ms;
   display: inline-flex;

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

@@ -47,7 +47,6 @@ export class CertificateChainViewer {
         return {
             "certificates": {
                 "type": "unknown",
-                "attribute": "certificates",
                 "mutable": false,
                 "complexType": {
                     "original": "X509Certificates",
@@ -71,7 +70,6 @@ export class CertificateChainViewer {
             },
             "download": {
                 "type": "boolean",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -86,7 +84,8 @@ export class CertificateChainViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "download"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"certificate-chain-viewer.js","sourceRoot":"","sources":["../../../src/components/certificate-chain-viewer/certificate-chain-viewer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAO7D,MAAM,OAAO,sBAAsB;IALnC;QAgBW,6BAAwB,GAAG,CAAC,CAAC;KA4DvC;IA1DS,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,EAAC,UAAU,8CAEE,CACT,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,MAAM,IAEX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACzD,cACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,mBACI,KAAK,KAAK,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACzE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;gBACxC,CAAC,IAEA,WAAW,CAAC,UAAU,CAChB,CACV,CAAC,CACE;YACL,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;gBACxD,IAAI,KAAK,KAAK,IAAI,CAAC,wBAAwB,EAAE,CAAC;oBAC5C,OAAO,CACL,mCACE,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,GACf,CACH,CAAC;gBACJ,CAAC;gBAED,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YAEF,iBACG,IAAI,CAAC,QAAQ,IAAI,CAChB,EAAC,aAAa,IACZ,WAAW,EAAE,IAAI,CAAC,YAAY,GAC9B,CACH,CACK,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  h,\n  Prop,\n  State,\n  Host,\n} from '@stencil/core';\nimport { X509Certificates } from '../../crypto';\nimport { Typography } from '../typography';\nimport { Miscellaneous } from '../certificate-details-parts';\n\n@Component({\n  tag: 'peculiar-certificate-chain-viewer',\n  styleUrl: 'certificate-chain-viewer.scss',\n  shadow: true,\n})\nexport class CertificateChainViewer {\n  /**\n   * The certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop({ reflect: true }) certificates: X509Certificates;\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  @State() selectedCertificateIndex = 0;\n\n  private renderEmptyState() {\n    return (\n      <div class=\"status_wrapper\">\n        <Typography>\n          There is no certificates available.\n        </Typography>\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.certificates) {\n      return this.renderEmptyState();\n    }\n\n    return (\n      <Host>\n        <div\n          role=\"tablist\"\n          class=\"tabs\"\n        >\n          {Array.from(this.certificates).map((certificate, index) => (\n            <button\n              type=\"button\"\n              role=\"tab\"\n              class=\"tab\"\n              aria-selected={index === this.selectedCertificateIndex ? 'true' : 'false'}\n              onClick={() => {\n                this.selectedCertificateIndex = index;\n              }}\n            >\n              {certificate.commonName}\n            </button>\n          ))}\n        </div>\n        {Array.from(this.certificates).map((certificate, index) => {\n          if (index === this.selectedCertificateIndex) {\n            return (\n              <peculiar-certificate-viewer\n                certificate={certificate}\n                download={false}\n              />\n            );\n          }\n\n          return null;\n        })}\n\n        <table>\n          {this.download && (\n            <Miscellaneous\n              certificate={this.certificates}\n            />\n          )}\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"certificate-chain-viewer.js","sourceRoot":"","sources":["../../../src/components/certificate-chain-viewer/certificate-chain-viewer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAO7D,MAAM,OAAO,sBAAsB;IALnC;QAgBW,6BAAwB,GAAG,CAAC,CAAC;KA4DvC;IA1DS,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,EAAC,UAAU,8CAEE,CACT,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,MAAM,IAEX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACzD,cACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,mBACI,KAAK,KAAK,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACzE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;gBACxC,CAAC,IAEA,WAAW,CAAC,UAAU,CAChB,CACV,CAAC,CACE;YACL,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;gBACxD,IAAI,KAAK,KAAK,IAAI,CAAC,wBAAwB,EAAE,CAAC;oBAC5C,OAAO,CACL,mCACE,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,GACf,CACH,CAAC;gBACJ,CAAC;gBAED,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YAEF,iBACG,IAAI,CAAC,QAAQ,IAAI,CAChB,EAAC,aAAa,IACZ,WAAW,EAAE,IAAI,CAAC,YAAY,GAC9B,CACH,CACK,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  h,\n  Prop,\n  State,\n  Host,\n} from '@stencil/core';\nimport { X509Certificates } from '../../crypto';\nimport { Typography } from '../typography';\nimport { Miscellaneous } from '../certificate-details-parts';\n\n@Component({\n  tag: 'peculiar-certificate-chain-viewer',\n  styleUrl: 'certificate-chain-viewer.scss',\n  shadow: true,\n})\nexport class CertificateChainViewer {\n  /**\n   * The certificate value for decode and show details. Use PEM or DER.\n   */\n  @Prop({ reflect: true }) certificates: X509Certificates;\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  @State() selectedCertificateIndex = 0;\n\n  private renderEmptyState() {\n    return (\n      <div class=\"status_wrapper\">\n        <Typography>\n          There is no certificates available.\n        </Typography>\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.certificates) {\n      return this.renderEmptyState();\n    }\n\n    return (\n      <Host>\n        <div\n          role=\"tablist\"\n          class=\"tabs\"\n        >\n          {Array.from(this.certificates).map((certificate, index) => (\n            <button\n              type=\"button\"\n              role=\"tab\"\n              class=\"tab\"\n              aria-selected={index === this.selectedCertificateIndex ? 'true' : 'false'}\n              onClick={() => {\n                this.selectedCertificateIndex = index;\n              }}\n            >\n              {certificate.commonName}\n            </button>\n          ))}\n        </div>\n        {Array.from(this.certificates).map((certificate, index) => {\n          if (index === this.selectedCertificateIndex) {\n            return (\n              <peculiar-certificate-viewer\n                certificate={certificate}\n                download={false}\n              />\n            );\n          }\n\n          return null;\n        })}\n\n        <table>\n          {this.download && (\n            <Miscellaneous\n              certificate={this.certificates}\n            />\n          )}\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/certificate-decoder/certificate-decoder.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 {
@@ -461,11 +461,11 @@
 }
 
 .controls {
-  margin-top: var(--pv-size-base-2);
+  margin-top: calc(var(--pv-size-base) * 2);
   display: flex;
   flex-direction: column;
-  gap: var(--pv-size-base-2);
-  margin-bottom: var(--pv-size-base-12);
+  gap: calc(var(--pv-size-base) * 2);
+  margin-bottom: calc(var(--pv-size-base) * 12);
 }
 
 .control_row {

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

@@ -131,7 +131,6 @@ export class CertificateDecoder {
         return {
             "certificateExamples": {
                 "type": "unknown",
-                "attribute": "certificate-examples",
                 "mutable": false,
                 "complexType": {
                     "original": "{\n    title: string;\n    value: string;\n  }[]",
@@ -149,7 +148,6 @@ export class CertificateDecoder {
             },
             "certificateToDecode": {
                 "type": "string",
-                "attribute": "certificate-to-decode",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -164,7 +162,8 @@ export class CertificateDecoder {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "certificate-to-decode"
             }
         };
     }