openapi-explorer 1.1.607 → 1.2.609

package/dist/lib/components/api-request.js

@@ -7,8 +7,6 @@ var _lit = require("lit");
 
 var _marked = require("marked");
 
-var _prismjs = _interopRequireDefault(require("prismjs"));
-
 var _mimeTypes = _interopRequireDefault(require("./mime-types.js"));
 
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
@@ -17,20 +15,18 @@ var _keyed = require("lit/directives/keyed.js");
 
 var _xmlButPrettier = _interopRequireDefault(require("xml-but-prettier"));
 
-var _commonUtils = require("../utils/common-utils.js");
-
 var _index = require("../languages/index.js");
 
 var _schemaUtils = require("../utils/schema-utils.js");
 
-require("./json-tree.js");
-
 require("./schema-tree.js");
 
 var _requestFormTable = _interopRequireDefault(require("./request-form-table.js"));
 
 require("./tag-input.js");
 
+require("./syntax-highlighter.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const textFileRegex = RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application/vnd.');
@@ -47,6 +43,7 @@ class ApiRequest extends _lit.LitElement {
     this.storedParamValues = {};
     this.responseMessage = '';
     this.responseStatus = '';
+    this.responseContentType = '';
     this.responseHeaders = '';
     this.responseText = '';
     this.responseUrl = '';
@@ -103,6 +100,10 @@ class ApiRequest extends _lit.LitElement {
         type: String,
         attribute: false
       },
+      responseContentType: {
+        type: String,
+        attribute: false
+      },
       responseHeaders: {
         type: String,
         attribute: false
@@ -466,25 +467,13 @@ class ApiRequest extends _lit.LitElement {
   apiResponseTabTemplate() {
     const curlSyntax = this.curlSyntax || this.computeCurlSyntax() || '';
     const hasResponse = this.responseMessage !== '';
-    const responseFormat = this.responseHeaders.includes('json') ? 'json' : this.responseHeaders.includes('html') || this.responseHeaders.includes('xml') ? 'html' : '';
     return (0, _lit.html)` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? (0, _lit.html)`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? (0, _lit.html)`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> ${!hasResponse ? '' : (0, _lit.html)`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button>`} </div> <div class="tab-panel col" style="border-width:0 0 1px 0"> <div id="tab_buttons" class="tab-buttons row" @click="${e => {
       if (e.target.classList.contains('tab-btn') === false) {
         return;
       }
 
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? (0, _lit.html)`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(this.responseText, e);
-    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
-      (0, _commonUtils.copyToClipboard)(window.getSelection().toString());
-    }}">${responseFormat ? (0, _lit.html)`<code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseText, _prismjs.default.languages[responseFormat], responseFormat))}</code>` : `${this.responseText}`}
-              </pre> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(this.responseHeaders, e);
-    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseHeaders, _prismjs.default.languages.css, 'css'))}</code></pre> </div> <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(curlSyntax, e);
-    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button> <pre class="fs-exclude" data-hj-suppress data-sl="mask">
-            <code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(curlSyntax.trim(), _prismjs.default.languages.shell, 'shell'))}</code>
-          </pre> </div> </div>`;
+    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
   }
 
   apiCallTemplate() {
@@ -845,6 +834,7 @@ class ApiRequest extends _lit.LitElement {
         headers[hdr.trim()] = hdrVal && hdrVal.trim();
       });
       const contentType = fetchResponse.headers.get('content-type');
+      this.responseContentType = contentType;
       const respEmpty = (await fetchResponse.clone().text()).length === 0;
 
       if (respEmpty) {

package/dist/lib/components/api-response.js

@@ -27,10 +27,14 @@ var _borderStyles = _interopRequireDefault(require("../styles/border-styles.js")
 
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles.js"));
 
+var _prismStyles = _interopRequireDefault(require("../styles/prism-styles.js"));
+
 require("./schema-tree.js");
 
 require("./schema-table.js");
 
+require("./syntax-highlighter.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 class ApiResponse extends _lit.LitElement {
@@ -94,7 +98,7 @@ class ApiResponse extends _lit.LitElement {
   }
 
   static finalizeStyles() {
-    return [_schemaStyles.default, _fontStyles.default, _flexStyles.default, _tabStyles.default, _tableStyles.default, _inputStyles.default, _borderStyles.default, (0, _lit.css)`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:var(--bg2,#333);color:var(--fg,#fff)}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
+    return [_schemaStyles.default, _fontStyles.default, _flexStyles.default, _tabStyles.default, _tableStyles.default, _inputStyles.default, _borderStyles.default, _prismStyles.default, (0, _lit.css)`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:var(--bg2,#333);color:var(--fg,#fff)}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
   }
 
   render() {
@@ -197,7 +201,7 @@ class ApiResponse extends _lit.LitElement {
       return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
 
-    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} ${mimeRespDetails.examples[0].exampleFormat === 'json' ? (0, _lit.html)` <json-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.examples[0].exampleValue}" class="example-panel pad-top-8"></json-tree>` : (0, _lit.html)` <pre class="example-panel generic-tree border-top pad-top-8">${mimeRespDetails.examples[0].exampleValue}</pre> `}` : (0, _lit.html)` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} ${v.exampleFormat === 'json' ? (0, _lit.html)` <json-tree render-style="${this.renderStyle}" .data="${v.exampleValue}"></json-tree>` : (0, _lit.html)`<pre class="generic-tree">${v.exampleValue}</pre>`} </div> `)} </span> `} `;
+    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} <syntax-highlighter class="example-panel generic-tree border-top pad-top-8" mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}">` : (0, _lit.html)` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
   }
 
   mimeSchemaTemplate(mimeRespDetails) {

package/dist/lib/components/json-tree.js

@@ -5,10 +5,6 @@ exports.default = void 0;
 
 var _lit = require("lit");
 
-var _commonUtils = require("../utils/common-utils.js");
-
-var _index = require("../languages/index.js");
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
 var _borderStyles = _interopRequireDefault(require("../styles/border-styles.js"));
@@ -31,17 +27,31 @@ class JsonTree extends _lit.LitElement {
       }
     };
   }
+  /**
+   * @param {Map<string, object>} changedProperties Changed Properties
+   */
+
+
+  update(changedProperties) {
+    if (changedProperties.has('data')) {
+      this.interactive = false;
+    }
+
+    super.update(changedProperties);
+  }
+
+  updated() {
+    this.interactive = true; // Note: interactive is not a reactive property
+  }
 
   static finalizeStyles() {
-    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, _keyFrameStyles.default, (0, _lit.css)`:host{display:flex}.json-tree{background:var(--bg2);padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{overflow:hidden}.open-bracket:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.open-bracket.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;margin:0 1rem!important;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
+    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, _keyFrameStyles.default, (0, _lit.css)`:host{display:flex}.json-tree{background:var(--bg2);padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.open-bracket:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.open-bracket.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _lit.html)` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="m-btn outline-primary" part="btn btn-fill" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(JSON.stringify(this.data, null, 2), e);
-    }}">${(0, _index.getI18nText)('operations.copy')}</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
+    return (0, _lit.html)` <div class="json-tree tree ${this.interactive ? 'interactive' : ''}"> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {

package/dist/lib/components/schema-table.js

@@ -56,15 +56,31 @@ class SchemaTable extends _lit.LitElement {
       this.schemaHideWriteOnly = 'true';
     }
   }
+  /**
+   * @param {Map<string, object>} changedProperties Changed Properties
+   */
+
+
+  update(changedProperties) {
+    if (changedProperties.has('data')) {
+      this.interactive = false;
+    }
+
+    super.update(changedProperties);
+  }
+
+  updated() {
+    this.interactive = true; // Note: interactive is not a reactive property
+  }
 
   static finalizeStyles() {
-    return [_fontStyles.default, _keyFrameStyles.default, _schemaStyles.default, (0, _lit.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}`];
+    return [_fontStyles.default, _keyFrameStyles.default, _schemaStyles.default, (0, _lit.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _lit.html)` ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div class="table"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    return (0, _lit.html)` ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
   }
 
   generateTree(data, dataType = 'object', key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {

package/dist/lib/components/schema-tree.js

@@ -62,15 +62,31 @@ class SchemaTree extends _lit.LitElement {
       this.schemaHideWriteOnly = 'true';
     }
   }
+  /**
+   * @param {Map<string, object>} changedProperties Changed Properties
+   */
+
+
+  update(changedProperties) {
+    if (changedProperties.has('data')) {
+      this.interactive = false;
+    }
+
+    super.update(changedProperties);
+  }
+
+  updated() {
+    this.interactive = true; // Note: interactive is not a reactive property
+  }
 
   static finalizeStyles() {
-    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, _keyFrameStyles.default, (0, _lit.css)`.tree{min-height:30px;background:var(--bg2);padding:12px;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.inside-bracket-wrapper{overflow:hidden}.tr:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.tr.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of.option{border-left:1px solid transparent}`];
+    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, _keyFrameStyles.default, (0, _lit.css)`.tree{min-height:30px;background:var(--bg2);padding:12px;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.inside-bracket-wrapper{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.tr:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.tr.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of.option{border-left:1px solid transparent}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _lit.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _lit.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _index.getI18nText)('schemas.collapse-desc') : (0, _index.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _index.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
+    return (0, _lit.html)` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _lit.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _index.getI18nText)('schemas.collapse-desc') : (0, _index.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _index.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
   }
 
   toggleSchemaDescription() {

package/dist/lib/components/syntax-highlighter.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _lit = require("lit");
+
+var _unsafeHtml = require("lit/directives/unsafe-html.js");
+
+var _marked = require("marked");
+
+var _prismjs = _interopRequireDefault(require("prismjs"));
+
+require("./json-tree.js");
+
+require("prismjs/components/prism-css.js");
+
+require("prismjs/components/prism-yaml.js");
+
+require("prismjs/components/prism-go.js");
+
+require("prismjs/components/prism-ruby.js");
+
+require("prismjs/components/prism-java.js");
+
+require("prismjs/components/prism-json.js");
+
+require("prismjs/components/prism-bash.js");
+
+require("prismjs/components/prism-python.js");
+
+require("prismjs/components/prism-http.js");
+
+require("prismjs/components/prism-csharp.js");
+
+var _prismStyles = _interopRequireDefault(require("../styles/prism-styles.js"));
+
+var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
+
+var _inputStyles = _interopRequireDefault(require("../styles/input-styles.js"));
+
+var _index = require("../languages/index.js");
+
+var _commonUtils = require("../utils/common-utils.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// It's possible none of these imports are actually necessary and should just be removed
+
+/**
+ * Mapping mime-type => prism language
+ */
+const LANGUAGES = [{
+  pattern: /json/,
+  language: 'json'
+}, {
+  pattern: /xml/,
+  language: 'html'
+}];
+/**
+ * Syntax Highlighter component.
+ */
+
+class SyntaxHighlighter extends _lit.LitElement {
+  static get properties() {
+    return {
+      content: {
+        type: Object
+      },
+      language: {
+        type: String,
+        attribute: 'language'
+      },
+      mimeType: {
+        type: String,
+        attribute: 'mime-type'
+      }
+    };
+  }
+
+  static finalizeStyles() {
+    return [_prismStyles.default, _fontStyles.default, _inputStyles.default, (0, _lit.css)`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}`];
+  }
+  /**
+   * Returns the prism language to use based on language/content type
+   * @returns {string} The language to use
+   */
+
+
+  detectLanguage() {
+    if (this.language) {
+      var _this$language;
+
+      return (_this$language = this.language) === null || _this$language === void 0 ? void 0 : _this$language.toLowerCase();
+    }
+
+    if (this.mimeType) {
+      var _this$mimeType, _LANGUAGES$find;
+
+      const lcMimeType = (_this$mimeType = this.mimeType) === null || _this$mimeType === void 0 ? void 0 : _this$mimeType.toLowerCase();
+      return (_LANGUAGES$find = LANGUAGES.find(def => def.pattern.test(lcMimeType))) === null || _LANGUAGES$find === void 0 ? void 0 : _LANGUAGES$find.language;
+    }
+
+    return null;
+  }
+
+  render() {
+    return this.renderCopyWrapper(this.renderHighlight());
+  }
+  /**
+   * Render the highlighted content.
+   * @returns Highlighter
+   */
+
+
+  renderHighlight() {
+    var _this$content, _this$content2;
+
+    const lang = this.detectLanguage();
+    const grammar = _prismjs.default.languages[lang];
+
+    if (lang === 'json' && typeof this.content !== 'string') {
+      return (0, _lit.html)`<json-tree .data="${this.content}">`;
+    }
+
+    return grammar ? (0, _lit.html)`<pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString(), grammar, lang))}</code></pre>` : (0, _lit.html)`<pre>${(_this$content2 = this.content) === null || _this$content2 === void 0 ? void 0 : _this$content2.toString()}</pre>`;
+  }
+  /**
+   * Render a copy-to-clipboard button.
+   * @param {*} content Content
+   * @returns Content
+   */
+
+
+  renderCopyWrapper(content) {
+    return (0, _lit.html)`<div> <button class="m-btn outline-primary toolbar-copy-btn" @click="${this.copyToClipboard}" part="btn btn-fill btn-copy">${(0, _index.getI18nText)('operations.copy')}</button> ${content} </div>`;
+  }
+  /**
+   * Copy to clipboard.
+   * @param {Event} e Event
+   */
+
+
+  copyToClipboard(e) {
+    var _this$content3;
+
+    const data = this.detectLanguage() === 'json' && typeof this.content !== 'string' ? JSON.stringify(this.content, null, 2) : (_this$content3 = this.content) === null || _this$content3 === void 0 ? void 0 : _this$content3.toString();
+    (0, _commonUtils.copyToClipboard)(data, e);
+  }
+
+}
+/*
+ * Configure marked globally.
+ */
+
+
+_marked.marked.setOptions({
+  highlight(code, lang) {
+    if (_prismjs.default.languages[lang]) {
+      return _prismjs.default.highlight(code, _prismjs.default.languages[lang], lang);
+    }
+
+    return code;
+  }
+
+});
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('syntax-highlighter', SyntaxHighlighter);
+}

package/dist/lib/openapi-explorer.js

@@ -5,30 +5,6 @@ exports.default = void 0;
 
 var _lit = require("lit");
 
-var _marked = require("marked");
-
-var _prismjs = _interopRequireDefault(require("prismjs"));
-
-require("prismjs/components/prism-css.js");
-
-require("prismjs/components/prism-yaml.js");
-
-require("prismjs/components/prism-go.js");
-
-require("prismjs/components/prism-ruby.js");
-
-require("prismjs/components/prism-java.js");
-
-require("prismjs/components/prism-json.js");
-
-require("prismjs/components/prism-bash.js");
-
-require("prismjs/components/prism-python.js");
-
-require("prismjs/components/prism-http.js");
-
-require("prismjs/components/prism-csharp.js");
-
 var _fontStyles = _interopRequireDefault(require("./styles/font-styles.js"));
 
 var _inputStyles = _interopRequireDefault(require("./styles/input-styles.js"));
@@ -67,11 +43,12 @@ var _apiRequestStyles = _interopRequireDefault(require("./styles/api-request-sty
 
 var _securitySchemeTemplate = require("./templates/security-scheme-template.js");
 
+require("./components/syntax-highlighter.js");
+
 require("./openapi-explorer-oauth-handler.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// It's possible none of these imports are actually necessary and should just be removed
 // Styles
 class OpenApiExplorer extends _lit.LitElement {
   constructor() {
@@ -363,17 +340,6 @@ class OpenApiExplorer extends _lit.LitElement {
       this.showAdvancedSearchDialog = false;
     }
 
-    _marked.marked.setOptions({
-      highlight(code, lang) {
-        if (_prismjs.default.languages[lang]) {
-          return _prismjs.default.highlight(code, _prismjs.default.languages[lang], lang);
-        }
-
-        return code;
-      }
-
-    });
-
     window.addEventListener('hashchange', () => {
       this.scrollTo((0, _commonUtils.getCurrentElement)());
     }, true);

package/dist/lib/styles/font-styles.js

@@ -5,6 +5,6 @@ exports.default = void 0;
 
 var _lit = require("lit");
 
-var _default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 18px);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre{margin:0;font-family:var(--font-mono);font-size:calc(var(--font-size-mono) - 1px)}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown pre,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 2px)}.m-markdown table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
+var _default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 18px);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:calc(var(--font-size-mono) - 1px)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 2px)}.m-markdown table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
 
 exports.default = _default;

package/dist/lib/styles/input-styles.js

@@ -6,6 +6,6 @@ exports.default = void 0;
 var _lit = require("lit");
 
 /* eslint-disable max-len */
-var _default = (0, _lit.css)`.m-btn{border-radius:var(--border-radius);font-weight:600;display:inline-block;padding:6px 16px;font-size:var(--font-size-small);outline:0;line-height:1;text-align:center;white-space:nowrap;border:2px solid var(--primary-color);background-color:transparent;transition:background-color .2s;user-select:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.m-btn.primary{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.outline-primary{color:var(--primary-color);background-color:var(--bg);border:1px solid var(--bg)}.m-btn.outline-primary:hover{border:1px solid var(--bg)}.m-btn.thin-border{border-width:1px}.m-btn.large{padding:8px 14px}.m-btn.small{padding:5px 12px}.m-btn.tiny{padding:5px 6px}.m-btn.circle{border-radius:50%}.m-btn:hover{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.nav{border:2px solid var(--secondary-color)}.m-btn.nav:hover{background-color:var(--secondary-color)}.m-btn:disabled{background-color:var(--bg3);color:var(--fg3);border-color:var(--fg3);cursor:progress;opacity:.4}.toolbar-copy-btn{position:absolute;top:8px;right:8px;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}button,input,pre,select,textarea{color:var(--fg);outline:0;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius)}button{font-family:var(--font-regular)}input[type=file],input[type=password],input[type=text],pre,select,textarea{font-family:var(--font-regular);font-weight:400;font-size:var(--font-size-small);transition:border .2s;padding:6px 5px}select{font-family:var(--font-regular);padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");background-position:calc(100% - 5px) center;background-repeat:no-repeat;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}select:hover{border-color:var(--primary-color)}input[type=password]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--placeholder-color);opacity:1}input[type=password]:active,input[type=password]:focus,input[type=text]:active,input[type=text]:focus,select:focus,textarea:active,textarea:focus{border:1px solid var(--primary-color)}input[type=file]{font-family:var(--font-regular);padding:2px;cursor:pointer;border:1px solid var(--primary-color);min-height:calc(var(--font-size-small) + 18px)}input[type=file]::-webkit-file-upload-button{font-family:var(--font-regular);font-size:var(--font-size-small);outline:0;cursor:pointer;padding:3px 8px;border:1px solid var(--primary-color);background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:var(--border-radius);-webkit-appearance:none}pre,textarea{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--input-bg)}pre::-webkit-scrollbar,textarea::-webkit-scrollbar{width:8px;height:8px}pre::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:var(--input-bg)}pre::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--border-color)}.link{font-size:var(--font-size-small);text-decoration:underline;color:var(--blue);font-family:var(--font-mono);margin-bottom:2px}input[type=checkbox]:focus{outline:0}input[type=checkbox]{appearance:none;display:inline-block;background-color:var(--light-bg);border-radius:9px;cursor:pointer;height:18px;position:relative;transition:border .15s,padding .25s;min-width:36px;width:36px;vertical-align:top}input[type=checkbox]:after{position:absolute;background-color:var(--bg);border-radius:8px;content:'';top:0;left:0;right:16px;display:block;height:16px;transition:left .25s .1s,right .15s .175s}input[type=checkbox]:checked{box-shadow:inset 0 0 0 13px var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{border:1px solid var(--primary-color);left:16px;right:1px;transition:border .25s,left .15s .25s,right .25s .175s}input.oauth-client-id{flex-grow:1;max-width:300px}input.oauth-client-secret{flex-grow:1;max-width:300px}`;
+var _default = (0, _lit.css)`.m-btn{border-radius:var(--border-radius);font-weight:600;display:inline-block;padding:6px 16px;font-size:var(--font-size-small);outline:0;line-height:1;text-align:center;white-space:nowrap;border:2px solid var(--primary-color);background-color:transparent;transition:background-color .2s;user-select:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.m-btn.primary{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.outline-primary{color:var(--primary-color);background-color:var(--bg);border:1px solid var(--bg)}.m-btn.outline-primary:hover{border:1px solid var(--bg)}.m-btn.thin-border{border-width:1px}.m-btn.large{padding:8px 14px}.m-btn.small{padding:5px 12px}.m-btn.tiny{padding:5px 6px}.m-btn.circle{border-radius:50%}.m-btn:hover{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.nav{border:2px solid var(--secondary-color)}.m-btn.nav:hover{background-color:var(--secondary-color)}.m-btn:disabled{background-color:var(--bg3);color:var(--fg3);border-color:var(--fg3);cursor:progress;opacity:.4}button,input,select,textarea{color:var(--fg);outline:0;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius)}button{font-family:var(--font-regular)}input[type=file],input[type=password],input[type=text],select,textarea{font-family:var(--font-regular);font-weight:400;font-size:var(--font-size-small);transition:border .2s;padding:6px 5px}select{font-family:var(--font-regular);padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");background-position:calc(100% - 5px) center;background-repeat:no-repeat;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}select:hover{border-color:var(--primary-color)}input[type=password]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--placeholder-color);opacity:1}input[type=password]:active,input[type=password]:focus,input[type=text]:active,input[type=text]:focus,select:focus,textarea:active,textarea:focus{border:1px solid var(--primary-color)}input[type=file]{font-family:var(--font-regular);padding:2px;cursor:pointer;border:1px solid var(--primary-color);min-height:calc(var(--font-size-small) + 18px)}input[type=file]::-webkit-file-upload-button{font-family:var(--font-regular);font-size:var(--font-size-small);outline:0;cursor:pointer;padding:3px 8px;border:1px solid var(--primary-color);background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:var(--border-radius);-webkit-appearance:none}pre,textarea{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--input-bg)}pre::-webkit-scrollbar,textarea::-webkit-scrollbar{width:8px;height:8px}pre::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:var(--input-bg)}pre::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--border-color)}.link{font-size:var(--font-size-small);text-decoration:underline;color:var(--blue);font-family:var(--font-mono);margin-bottom:2px}input[type=checkbox]:focus{outline:0}input[type=checkbox]{appearance:none;display:inline-block;background-color:var(--light-bg);border-radius:9px;cursor:pointer;height:18px;position:relative;transition:border .15s,padding .25s;min-width:36px;width:36px;vertical-align:top}input[type=checkbox]:after{position:absolute;background-color:var(--bg);border-radius:8px;content:'';top:0;left:0;right:16px;display:block;height:16px;transition:left .25s .1s,right .15s .175s}input[type=checkbox]:checked{box-shadow:inset 0 0 0 13px var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{border:1px solid var(--primary-color);left:16px;right:1px;transition:border .25s,left .15s .25s,right .25s .175s}input.oauth-client-id{flex-grow:1;max-width:300px}input.oauth-client-secret{flex-grow:1;max-width:300px}`;
 
 exports.default = _default;

package/dist/lib/styles/prism-styles.js

@@ -5,6 +5,6 @@ exports.default = void 0;
 
 var _lit = require("lit");
 
-var _default = (0, _lit.css)`code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-]{white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--light-fg)}.token.punctuation{color:var(--fg)}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:var(--pink)}.token.function-name{color:var(--blue)}.token.boolean,.token.function,.token.number{color:var(--red)}.token.class-name,.token.constant,.token.property,.token.symbol{color:var(--code-property-color)}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:var(--code-keyword-color)}.token.attr-value,.token.char,.token.regex,.token.string{color:var(--green);white-space:pre-wrap;line-break:anywhere}.token.variable{white-space:pre-wrap;line-break:anywhere}.token.entity,.token.operator,.token.url{color:var(--code-operator-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}`;
+var _default = (0, _lit.css)`code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-]{white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--light-fg)}.token.punctuation{color:var(--fg)}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:var(--pink)}.token.function-name{color:var(--blue)}.token.boolean,.token.function,.token.number{color:var(--red)}.token.class-name,.token.constant,.token.property,.token.symbol,.token.tag{color:var(--code-property-color)}.token.atrule,.token.attr-name,.token.builtin,.token.important,.token.keyword,.token.selector{color:var(--code-keyword-color)}.token.attr-value,.token.char,.token.regex,.token.string{color:var(--green);white-space:pre-wrap;line-break:anywhere}.token.variable{white-space:pre-wrap;line-break:anywhere}.token.entity,.token.operator,.token.url{color:var(--code-operator-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.token.header{color:unset;background:unset}`;
 
 exports.default = _default;

package/dist/lib/templates/code-samples-template.js

@@ -5,16 +5,6 @@ exports.default = codeSamplesTemplate;
 
 var _lit = require("lit");
 
-var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
-var _prismjs = _interopRequireDefault(require("prismjs"));
-
-var _commonUtils = require("../utils/common-utils.js");
-
-var _index = require("../languages/index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable indent */
 function codeSamplesTemplate(xCodeSamples) {
   return (0, _lit.html)` <section class="table-title top-gap"> CODE SAMPLES  <div class="tab-panel col" @click="${e => {
@@ -30,8 +20,6 @@ function codeSamplesTemplate(xCodeSamples) {
       tabBodyEl.style.display = tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none';
     });
   }}"> <div class="tab-buttons row" style="width:100"> ${xCodeSamples.map((v, i) => (0, _lit.html)`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab="${v.lang}${i}"> ${v.label || v.lang} </button>`)} </div> ${xCodeSamples.map((v, i) => {
-    var _v$lang, _v$lang2, _v$lang3;
-
     const paddingToRemove = Math.min(...v.source.split('\n').slice(1).map(l => {
       var _l$match;
 
@@ -39,10 +27,7 @@ function codeSamplesTemplate(xCodeSamples) {
     }).filter(l => typeof l !== 'undefined'));
     const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);
     const fullSource = sanitizedSource.join('\n');
-    return (0, _lit.html)` <div class="tab-content m-markdown code-sample-wrapper" style="display:${i === 0 ? 'block' : 'none'}" data-tab="${v.lang}${i}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(v.source, e);
-    }}">${(0, _index.getI18nText)('operations.copy')}</button> <pre><code>${_prismjs.default.languages[(_v$lang = v.lang) === null || _v$lang === void 0 ? void 0 : _v$lang.toLowerCase()] ? (0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(fullSource, _prismjs.default.languages[(_v$lang2 = v.lang) === null || _v$lang2 === void 0 ? void 0 : _v$lang2.toLowerCase()], (_v$lang3 = v.lang) === null || _v$lang3 === void 0 ? void 0 : _v$lang3.toLowerCase())) : fullSource}
-          </code></pre> </div>`;
+    return (0, _lit.html)` <div class="tab-content m-markdown code-sample-wrapper" style="display:${i === 0 ? 'block' : 'none'}" data-tab="${v.lang}${i}"> <syntax-highlighter language="${v.lang}" .content="${fullSource}"> </div>`;
   })} </div></section>`;
 }
 /* eslint-enable indent */

package/dist/lib/templates/components-template.js

@@ -11,8 +11,6 @@ var _unsafeHtml = require("lit/directives/unsafe-html.js");
 
 var _marked = require("marked");
 
-require("../components/json-tree.js");
-
 require("../components/schema-tree.js");
 
 /* eslint-disable no-console */