openapi-explorer 1.1.607 → 1.2.609

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

@@ -1,17 +1,15 @@
 import { LitElement, html } from 'lit';
 import { marked } from 'marked';
-import Prism from 'prismjs';
 import mimeTypeResolver from './mime-types.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { keyed } from 'lit/directives/keyed.js';
 import formatXml from 'xml-but-prettier';
-import { copyToClipboard } from '../utils/common-utils.js';
 import { getI18nText } from '../languages/index.js';
 import { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';
-import './json-tree.js';
 import './schema-tree.js';
 import getRequestFormTable from './request-form-table.js';
 import './tag-input.js';
+import './syntax-highlighter.js';
 const textFileRegex = RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application/vnd.');
 const mediaFileRegex = RegExp('^audio/|^image/|^video/');
 export default class ApiRequest extends LitElement {
@@ -25,6 +23,7 @@ export default class ApiRequest extends LitElement {
     this.storedParamValues = {};
     this.responseMessage = '';
     this.responseStatus = '';
+    this.responseContentType = '';
     this.responseHeaders = '';
     this.responseText = '';
     this.responseUrl = '';
@@ -81,6 +80,10 @@ export default class ApiRequest extends LitElement {
         type: String,
         attribute: false
       },
+      responseContentType: {
+        type: String,
+        attribute: false
+      },
       responseHeaders: {
         type: String,
         attribute: false
@@ -444,25 +447,13 @@ export default class ApiRequest extends 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 html` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? html`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> ${!hasResponse ? '' : 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 ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? 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' ? 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>` : html` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? html`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      copyToClipboard(this.responseText, e);
-    }}" part="btn btn-fill">${getI18nText('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
-      copyToClipboard(window.getSelection().toString());
-    }}">${responseFormat ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.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 => {
-      copyToClipboard(this.responseHeaders, e);
-    }}" part="btn btn-fill">${getI18nText('operations.copy')}</button> <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.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 => {
-      copyToClipboard(curlSyntax, e);
-    }}" part="btn btn-fill">${getI18nText('operations.copy')}</button> <pre class="fs-exclude" data-hj-suppress data-sl="mask">
-            <code>${unsafeHTML(Prism.highlight(curlSyntax.trim(), Prism.languages.shell, 'shell'))}</code>
-          </pre> </div> </div>`;
+    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? 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' ? 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>` : 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() {
@@ -823,6 +814,7 @@ export default class ApiRequest extends 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/es/components/api-response.js

@@ -10,8 +10,10 @@ import InputStyles from '../styles/input-styles.js';
 import TabStyles from '../styles/tab-styles.js';
 import BorderStyles from '../styles/border-styles.js';
 import SchemaStyles from '../styles/schema-styles.js';
+import PrismStyles from '../styles/prism-styles.js';
 import './schema-tree.js';
 import './schema-table.js';
+import './syntax-highlighter.js';
 export default class ApiResponse extends LitElement {
   constructor() {
     super();
@@ -73,7 +75,7 @@ export default class ApiResponse extends LitElement {
   }
 
   static finalizeStyles() {
-    return [SchemaStyles, FontStyles, FlexStyles, TabStyles, TableStyles, InputStyles, BorderStyles, 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, FontStyles, FlexStyles, TabStyles, TableStyles, InputStyles, BorderStyles, PrismStyles, 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() {
@@ -176,7 +178,7 @@ export default class ApiResponse extends LitElement {
       return html` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
 
-    return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} ${mimeRespDetails.examples[0].exampleFormat === 'json' ? html` <json-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.examples[0].exampleValue}" class="example-panel pad-top-8"></json-tree>` : html` <pre class="example-panel generic-tree border-top pad-top-8">${mimeRespDetails.examples[0].exampleValue}</pre> `}` : 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 => 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 => html` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''} ${v.exampleFormat === 'json' ? html` <json-tree render-style="${this.renderStyle}" .data="${v.exampleValue}"></json-tree>` : html`<pre class="generic-tree">${v.exampleValue}</pre>`} </div> `)} </span> `} `;
+    return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(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}">` : 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 => 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 => html` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
   }
 
   mimeSchemaTemplate(mimeRespDetails) {

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

@@ -1,6 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import { copyToClipboard } from '../utils/common-utils.js';
-import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
 import BorderStyles from '../styles/border-styles.js';
 import InputStyles from '../styles/input-styles.js';
@@ -17,17 +15,31 @@ export default class JsonTree extends 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, BorderStyles, InputStyles, KeyFrameStyles, 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, BorderStyles, InputStyles, KeyFrameStyles, 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 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 => {
-      copyToClipboard(JSON.stringify(this.data, null, 2), e);
-    }}">${getI18nText('operations.copy')}</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
+    return html` <div class="json-tree tree ${this.interactive ? 'interactive' : ''}"> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {

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

@@ -42,15 +42,31 @@ export default class SchemaTable extends 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, KeyFrameStyles, SchemaStyles, 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, KeyFrameStyles, SchemaStyles, 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 html` ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(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 ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    return html` ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(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 ? 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/es/components/schema-tree.js

@@ -47,15 +47,31 @@ export default class SchemaTree extends 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, SchemaStyles, BorderStyles, KeyFrameStyles, 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, SchemaStyles, BorderStyles, KeyFrameStyles, 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 html` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
+    return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
   }
 
   toggleSchemaDescription() {

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

@@ -0,0 +1,143 @@
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { marked } from 'marked';
+import Prism from 'prismjs';
+import './json-tree.js'; // It's possible none of these imports are actually necessary and should just be removed
+
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-yaml.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-csharp.js';
+import PrismStyles from '../styles/prism-styles.js';
+import FontStyle from '../styles/font-styles.js';
+import InputStyle from '../styles/input-styles.js';
+import { getI18nText } from '../languages/index.js';
+import { copyToClipboard } from '../utils/common-utils.js';
+/**
+ * Mapping mime-type => prism language
+ */
+
+const LANGUAGES = [{
+  pattern: /json/,
+  language: 'json'
+}, {
+  pattern: /xml/,
+  language: 'html'
+}];
+/**
+ * Syntax Highlighter component.
+ */
+
+class SyntaxHighlighter extends LitElement {
+  static get properties() {
+    return {
+      content: {
+        type: Object
+      },
+      language: {
+        type: String,
+        attribute: 'language'
+      },
+      mimeType: {
+        type: String,
+        attribute: 'mime-type'
+      }
+    };
+  }
+
+  static finalizeStyles() {
+    return [PrismStyles, FontStyle, InputStyle, 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 = Prism.languages[lang];
+
+    if (lang === 'json' && typeof this.content !== 'string') {
+      return html`<json-tree .data="${this.content}">`;
+    }
+
+    return grammar ? html`<pre><code>${unsafeHTML(Prism.highlight((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString(), grammar, lang))}</code></pre>` : 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 html`<div> <button class="m-btn outline-primary toolbar-copy-btn" @click="${this.copyToClipboard}" part="btn btn-fill btn-copy">${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();
+    copyToClipboard(data, e);
+  }
+
+}
+/*
+ * Configure marked globally.
+ */
+
+
+marked.setOptions({
+  highlight(code, lang) {
+    if (Prism.languages[lang]) {
+      return Prism.highlight(code, Prism.languages[lang], lang);
+    }
+
+    return code;
+  }
+
+});
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('syntax-highlighter', SyntaxHighlighter);
+}

package/dist/es/openapi-explorer.js

@@ -1,17 +1,4 @@
-import { LitElement, css } from 'lit';
-import { marked } from 'marked';
-import Prism from 'prismjs'; // It's possible none of these imports are actually necessary and should just be removed
-
-import 'prismjs/components/prism-css.js';
-import 'prismjs/components/prism-yaml.js';
-import 'prismjs/components/prism-go.js';
-import 'prismjs/components/prism-ruby.js';
-import 'prismjs/components/prism-java.js';
-import 'prismjs/components/prism-json.js';
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/components/prism-http.js';
-import 'prismjs/components/prism-csharp.js'; // Styles
+import { LitElement, css } from 'lit'; // Styles
 
 import FontStyles from './styles/font-styles.js';
 import InputStyles from './styles/input-styles.js';
@@ -32,6 +19,7 @@ import ProcessSpec from './utils/spec-parser.js';
 import mainBodyTemplate from './templates/mainBodyTemplate.js';
 import apiRequestStyles from './styles/api-request-styles.js';
 import { checkForAuthToken } from './templates/security-scheme-template.js';
+import './components/syntax-highlighter.js';
 export default class OpenApiExplorer extends LitElement {
   constructor() {
     super();
@@ -322,16 +310,6 @@ export default class OpenApiExplorer extends LitElement {
       this.showAdvancedSearchDialog = false;
     }
 
-    marked.setOptions({
-      highlight(code, lang) {
-        if (Prism.languages[lang]) {
-          return Prism.highlight(code, Prism.languages[lang], lang);
-        }
-
-        return code;
-      }
-
-    });
     window.addEventListener('hashchange', () => {
       this.scrollTo(getCurrentElement());
     }, true);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default 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}`;
+export default 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}`;

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

@@ -1,4 +1,4 @@
 import { css } from 'lit';
 /* eslint-disable max-len */
 
-export default 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}`;
+export default 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}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default 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}`;
+export default 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}`;

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

@@ -1,8 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import Prism from 'prismjs';
-import { copyToClipboard } from '../utils/common-utils.js';
-import { getI18nText } from '../languages/index.js';
 /* eslint-disable indent */
 
 export default function codeSamplesTemplate(xCodeSamples) {
@@ -19,8 +15,6 @@ export default function codeSamplesTemplate(xCodeSamples) {
       tabBodyEl.style.display = tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none';
     });
   }}"> <div class="tab-buttons row" style="width:100"> ${xCodeSamples.map((v, i) => 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;
 
@@ -28,10 +22,7 @@ export default 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 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 => {
-      copyToClipboard(v.source, e);
-    }}">${getI18nText('operations.copy')}</button> <pre><code>${Prism.languages[(_v$lang = v.lang) === null || _v$lang === void 0 ? void 0 : _v$lang.toLowerCase()] ? unsafeHTML(Prism.highlight(fullSource, Prism.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 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/es/templates/components-template.js

@@ -3,7 +3,6 @@ import { schemaInObjectNotation } from '../utils/schema-utils.js';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
-import '../components/json-tree.js';
 import '../components/schema-tree.js';
 
 function componentBodyTemplate(sComponent) {

package/dist/es/utils/theme.js

@@ -71,5 +71,5 @@ export default function setTheme(theme = {}) {
     codeKeywordColor: theme.codeKeywordColor || '#07a',
     codeOperatorColor: theme.codeOperatorColor || '#9a6e3a'
   };
-  return html` <style>*,:after,:before{box-sizing:border-box}:host{--border-radius:2px;--layout:${this.layout || 'column'};--nav-item-padding:${this.navItemSpacing === 'relaxed' ? '10px' : this.navItemSpacing === 'compact' ? '5px 10px' : '7px 10px'};--resp-area-height:${this.responseAreaHeight};--font-size-small:13px;--font-size-mono:13px;--font-size-regular:16px;--dialog-z-index:1000;--bg:${newTheme.bg1};--bg2:${newTheme.bg2};--bg3:${newTheme.bg3};--light-bg:${newTheme.lightBg};--fg:${newTheme.fg1};--fg2:${newTheme.fg2};--fg3:${newTheme.fg3};--light-fg:${newTheme.lightFg};--selection-bg:${newTheme.selectionBg};--selection-fg:${newTheme.selectionFg};--overlay-bg:${newTheme.overlayBg};--border-color:${newTheme.borderColor};--light-border-color:${newTheme.lightBorderColor};--code-border-color:${newTheme.codeBorderColor};--input-bg:${newTheme.inputBg};--placeholder-color:${newTheme.placeHolder};--hover-color:${newTheme.hoverColor};${defaultColors.join(';\n')} ${lightColors.join(';\n')} --header-bg:${newTheme.headerColor};--header-fg:${newTheme.headerColorInvert};--header-color-darker:${newTheme.headerColorDarker};--header-color-border:${newTheme.headerColorBorder};--nav-bg-color:${newTheme.navBgColor};--nav-text-color:${newTheme.navTextColor};--nav-hover-bg-color:${newTheme.navHoverBgColor};--nav-hover-scrollbar-color:${navHoverScrollbarColor};--nav-hover-text-color:${newTheme.navHoverTextColor};--code-fg:${newTheme.codeFg};--inline-code-fg:${newTheme.inlineCodeFg};--primary-color:${theme.primaryColor};--secondary-color:${theme.secondaryColor};--primary-btn-text-color:${ColorUtils.color.selectTextColorFromBackground(theme.primaryColor)}}</style>`;
+  return html` <style>*,:after,:before{box-sizing:border-box}:host{--border-radius:2px;--layout:${this.layout || 'column'};--nav-item-padding:${this.navItemSpacing === 'relaxed' ? '10px' : this.navItemSpacing === 'compact' ? '5px 10px' : '7px 10px'};--resp-area-height:${this.responseAreaHeight};--font-size-small:13px;--font-size-mono:13px;--font-size-regular:16px;--dialog-z-index:1000;--bg:${newTheme.bg1};--bg2:${newTheme.bg2};--bg3:${newTheme.bg3};--light-bg:${newTheme.lightBg};--fg:${newTheme.fg1};--fg2:${newTheme.fg2};--fg3:${newTheme.fg3};--light-fg:${newTheme.lightFg};--selection-bg:${newTheme.selectionBg};--selection-fg:${newTheme.selectionFg};--overlay-bg:${newTheme.overlayBg};--border-color:${newTheme.borderColor};--light-border-color:${newTheme.lightBorderColor};--code-border-color:${newTheme.codeBorderColor};--input-bg:${newTheme.inputBg};--placeholder-color:${newTheme.placeHolder};--hover-color:${newTheme.hoverColor};${defaultColors.join(';\n')} ${lightColors.join(';\n')} --header-bg:${newTheme.headerColor};--header-fg:${newTheme.headerColorInvert};--header-color-darker:${newTheme.headerColorDarker};--header-color-border:${newTheme.headerColorBorder};--nav-bg-color:${newTheme.navBgColor};--nav-text-color:${newTheme.navTextColor};--nav-hover-bg-color:${newTheme.navHoverBgColor};--nav-hover-scrollbar-color:${navHoverScrollbarColor};--nav-hover-text-color:${newTheme.navHoverTextColor};--code-fg:${newTheme.codeFg};--inline-code-fg:${newTheme.inlineCodeFg};--code-property-color:${newTheme.codePropertyColor};--code-keyword-color:${newTheme.codeKeywordColor};--code-operator-color:${newTheme.codeOperatorColor};--primary-color:${theme.primaryColor};--secondary-color:${theme.secondaryColor};--primary-btn-text-color:${ColorUtils.color.selectTextColorFromBackground(theme.primaryColor)}}</style>`;
 }