rapidoc 9.1.7 → 9.3.0

package/src/components/api-request.js

@@ -1,10 +1,9 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
+import { guard } from 'lit/directives/guard.js'; // eslint-disable-line import/extensions
+import { live } from 'lit/directives/live.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import Prism from 'prismjs';
-
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { guard } from 'lit-html/directives/guard';
-import { live } from 'lit-html/directives/live';
 import TableStyles from '~/styles/table-styles';
 import FlexStyles from '~/styles/flex-styles';
 import InputStyles from '~/styles/input-styles';
@@ -53,6 +52,7 @@ export default class ApiRequest extends LitElement {
       responseStatus: { type: String, attribute: false },
       responseUrl: { type: String, attribute: false },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       allowTry: { type: String, attribute: 'allow-try' },
       renderStyle: { type: String, attribute: 'render-style' },
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -69,6 +69,7 @@ export default class ApiRequest extends LitElement {
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
       allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },
       schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },
+      schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },
       fetchCredentials: { type: String, attribute: 'fetch-credentials' },
 
       // properties for internal tracking
@@ -99,12 +100,12 @@ export default class ApiRequest extends LitElement {
           text-align: right;
           line-height: var(--font-size-small);
         }
-        .param-name{
+        .param-name {
           color: var(--fg); 
           font-family: var(--font-mono);
         }
         .param-name.deprecated { 
-          text-decoration: line-through;
+          color: var(--red);
         }
         .param-type{
           color: var(--light-fg); 
@@ -193,11 +194,11 @@ export default class ApiRequest extends LitElement {
         ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}
       </div>
       <div>
-        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
-        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
+        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
+        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
         ${this.requestBodyTemplate()}
-        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
-        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
+        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
+        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
         ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}
       </div>  
     </div>
@@ -246,7 +247,12 @@ export default class ApiRequest extends LitElement {
               }
             }
           }"
-          >${v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')}</a>
+          >
+          ${this.useSummaryToListExamples === 'true'
+            ? v.description || v.summary || (v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || ''))
+            : v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')
+          }
+          </a>
           ${paramType === 'array' ? '] ' : ''}
         `)}
       `
@@ -317,18 +323,20 @@ export default class ApiRequest extends LitElement {
           serializeStyle || 'json',
           '',
           '',
-          true,
-          true,
+          !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+          !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
           'text',
           false,
         )[0].exampleValue;
       }
       const labelColWidth = 'read focused'.includes(this.renderStyle) ? '200px' : '160px';
       tableRows.push(html`
-      <tr> 
+      <tr title="${param.deprecated ? 'Deprecated' : ''}"> 
         <td rowspan="${this.allowTry === 'true' ? '1' : '2'}" style="width:${labelColWidth}; min-width:100px;">
-          <div class="param-name">
-            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}${param.name}
+          <div class="param-name ${param.deprecated ? 'deprecated' : ''}" >
+            ${param.deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}
+            ${param.name}
           </div>
           <div class="param-type">
             ${paramSchema.type === 'array'
@@ -339,7 +347,7 @@ export default class ApiRequest extends LitElement {
         </td>  
         ${this.allowTry === 'true'
           ? html`
-            <td style="min-width:100px;">
+            <td style="min-width:100px;" colspan="${paramSchema.default || paramSchema.constrain || paramSchema.allowedValues || paramSchema.pattern ? '1' : '2'}">
               ${paramSchema.type === 'array'
                 ? html`
                   <tag-input class="request-param" 
@@ -365,8 +373,8 @@ export default class ApiRequest extends LitElement {
                           this.activeParameterSchemaTabs = newState;
                         }
                       }}">
-                        <button class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
                         <button class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
+                        <button class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
                       </div>
                       ${this.activeParameterSchemaTabs[param.name] === 'example'
                         ? html`<div class="tab-content col">
@@ -394,7 +402,10 @@ export default class ApiRequest extends LitElement {
                               schema-description-expanded = "${this.schemaDescriptionExpanded}"
                               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
                               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-                              schema-hide-write-only = "false"
+                              schema-hide-write-only = "${this.schemaHideWriteOnly.includes(this.method)}"
+                              exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+            anchor:anchor, anchor-param-example:anchor-param-example"
                             > </schema-tree>
                           </div>`
                         }
@@ -407,16 +418,17 @@ export default class ApiRequest extends LitElement {
                       data-pname="${param.name}" 
                       data-example="${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
                       data-param-allow-reserved = "${paramAllowReserved}"
+                      data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                       data-array="false"
-                      .value="${live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
+                      .value="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
                     />`
                 }
             </td>`
           : ''
         }
-        <td colspan="${(this.allowTry === 'true') ? '1' : '2'}">
-          ${paramSchema.default || paramSchema.constrain || paramSchema.allowedValues || paramSchema.pattern
-            ? html`
+        ${paramSchema.default || paramSchema.constrain || paramSchema.allowedValues || paramSchema.pattern
+          ? html`
+            <td colspan="${(this.allowTry === 'true') ? '1' : '2'}">
               <div class="param-constraint">
                 ${paramSchema.default ? html`<span style="font-weight:bold">Default: </span>${paramSchema.default}<br/>` : ''}
                 ${paramSchema.pattern ? html`<span style="font-weight:bold">Pattern: </span>${paramSchema.pattern}<br/>` : ''}
@@ -439,14 +451,14 @@ export default class ApiRequest extends LitElement {
                       }}"
                     >${v}</a>`
                   }`)}
-              </div>`
-            : ''
-          }
-        </td>
+              </div>
+            </td>`
+          : html`<td></td>`
+        }
       </tr>
       <tr>
         ${this.allowTry === 'true' ? html`<td style="border:none"> </td>` : ''}
-        <td colspan="2" style="border:none; margin-top:0; padding:0 5px 8px 5px;">
+        <td colspan="2" style="border:none">
           <span class="m-markdown-small">${unsafeHTML(marked(param.description || ''))}</span>
           ${this.exampleListTemplate.call(this, param.name, paramSchema.type, example.exampleList)}
         </td>
@@ -539,7 +551,7 @@ export default class ApiRequest extends LitElement {
       let schemaAsObj;
       let reqBodyExamples = [];
 
-      if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
+      if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text') || this.selectedRequestBodyType.includes('jose')) {
         // Generate Example
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyExamples = generateExample(
@@ -547,8 +559,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            false,
-            true,
+            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
             'text',
             false,
           );
@@ -606,8 +618,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            false,
-            true,
+            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
             'text',
             false,
           );
@@ -626,7 +638,7 @@ export default class ApiRequest extends LitElement {
       }
 
       // Generate Schema
-      if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text')) {
+      if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text') || this.selectedRequestBodyType.includes('jose')) {
         schemaAsObj = schemaInObjectNotation(reqBody.schema, {});
         if (this.schemaStyle === 'table') {
           reqBodySchemaHtml = html`
@@ -638,8 +650,9 @@ export default class ApiRequest extends LitElement {
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-              schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-              schema-hide-write-only = "false"
+              schema-hide-read-only = "${this.schemaHideReadOnly}"
+              schema-hide-write-only = "${this.schemaHideWriteOnly}"
+              exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
             > </schema-table>
           `;
         } else if (this.schemaStyle === 'tree') {
@@ -652,8 +665,9 @@ export default class ApiRequest extends LitElement {
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-              schema-hide-read-only = "true"
-              schema-hide-write-only = "false"
+              schema-hide-read-only = "${this.schemaHideReadOnly}"
+              schema-hide-write-only = "${this.schemaHideWriteOnly}"
+              exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
             > </schema-tree>
           `;
         }
@@ -670,12 +684,12 @@ export default class ApiRequest extends LitElement {
         </div>
         ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}
         
-        ${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text'))
+        ${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text') || this.selectedRequestBodyType.includes('jose'))
           ? html`
             <div class="tab-panel col" style="border-width:0 0 1px 0;">
               <div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
-                <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
                 <button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
+                <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
               </div>
               ${this.activeSchemaTab === 'example'
                 ? html`<div class="tab-content col"> ${reqBodyExampleHtml}</div>`
@@ -698,8 +712,8 @@ export default class ApiRequest extends LitElement {
       'json',
       fieldSchema.examples,
       fieldSchema.example,
-      false,
-      true,
+      !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+      !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
       'text',
       false,
     );
@@ -724,20 +738,10 @@ export default class ApiRequest extends LitElement {
           }
           if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; }
         }}">
-          <button class="v-tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
           <button class="v-tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
+          <button class="v-tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
         </div>
       </div>
-      ${html`
-        <div class="tab-content col" data-tab = 'schema' style="display:${this.activeSchemaTab !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;"> 
-          <schema-tree
-            .data = '${formdataPartSchema}'
-            schema-expand-level = "${this.schemaExpandLevel}"
-            schema-description-expanded = "${this.schemaDescriptionExpanded}"
-            allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-          > </schema-tree>
-        </div>`
-      }
       ${html`
         <div class="tab-content col" data-tab = 'example' style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'}; padding-left:5px; width:100%"> 
           <textarea 
@@ -755,6 +759,16 @@ export default class ApiRequest extends LitElement {
           <textarea data-pname = "hidden-${fieldName}" data-ptype = "${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none">${formdataPartExample[0].exampleValue}</textarea>
         </div>`
       }
+      ${html`
+        <div class="tab-content col" data-tab = 'schema' style="display:${this.activeSchemaTab !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;"> 
+          <schema-tree
+            .data = '${formdataPartSchema}'
+            schema-expand-level = "${this.schemaExpandLevel}"
+            schema-description-expanded = "${this.schemaDescriptionExpanded}"
+            allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+          > </schema-tree>
+        </div>`
+      }
       </div>
     `;
   }
@@ -773,7 +787,7 @@ export default class ApiRequest extends LitElement {
         const labelColWidth = 'read focused'.includes(this.renderStyle) ? '200px' : '160px';
         const example = normalizeExamples((paramSchema.examples || paramSchema.example), paramSchema.type);
         formDataTableRows.push(html`
-        <tr> 
+        <tr title="${fieldSchema.deprecated ? 'Deprecated' : ''}"> 
           <td style="width:${labelColWidth}; min-width:100px;">
             <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}">
               ${fieldName}${(schema.required?.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}
@@ -913,7 +927,7 @@ export default class ApiRequest extends LitElement {
       <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
         <div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage}</div>
         <div style="flex:1"></div>
-        <button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
+        <button class="m-btn" part="btn btn-outline btn-clear-response" @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) => {
@@ -936,19 +950,19 @@ export default class ApiRequest extends LitElement {
               }
             </div>`
           : html`
-            <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
+            <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
               <button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
-              <pre style="white-space:pre; max-height:400px; overflow:auto">${responseFormat
+              <pre style="white-space:pre; min-height:50px; height:400px; resize:vertical; overflow:auto">${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'};" >
+        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
           <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
           <pre style="white-space: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'};">
+        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
           <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
           <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
         </div>
@@ -1006,15 +1020,15 @@ export default class ApiRequest extends LitElement {
       ${
         this.parameters.length > 0 || this.request_body
           ? html`
-            <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
+            <button class="m-btn thin-border" part="btn btn-outline btn-fill" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
               FILL EXAMPLE
             </button>
-            <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onClearRequestData}">
+            <button class="m-btn thin-border" part="btn btn-outline btn-clear" style="margin-right:5px;" @click="${this.onClearRequestData}">
               CLEAR
             </button>`
           : ''
       }
-      <button class="m-btn primary thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">TRY</button>
+      <button class="m-btn primary thin-border" part="btn btn-try" @click="${this.onTryClick}">TRY</button>
     </div>
     ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}
     `;
@@ -1058,7 +1072,6 @@ export default class ApiRequest extends LitElement {
     const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
     const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
-
     fetchUrl = this.path;
     const fetchOptions = {
       method: this.method.toUpperCase(),
@@ -1111,7 +1124,7 @@ export default class ApiRequest extends LitElement {
         const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
-          const { paramSerializeStyle, paramSerializeExplode } = el.dataset.paramSerializeStyle;
+          const { paramSerializeStyle, paramSerializeExplode } = el.dataset;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
           if (el.dataset.paramAllowReserved === 'true') {
             queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
@@ -1322,6 +1335,8 @@ export default class ApiRequest extends LitElement {
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
+    const controller = new AbortController();
+    const { signal } = controller;
     fetchOptions.headers = reqHeaders;
     const fetchRequest = new Request(fetchUrl, fetchOptions);
     this.dispatchEvent(new CustomEvent('before-try', {
@@ -1329,6 +1344,7 @@ export default class ApiRequest extends LitElement {
       composed: true,
       detail: {
         request: fetchRequest,
+        controller,
       },
     }));
 
@@ -1340,7 +1356,7 @@ export default class ApiRequest extends LitElement {
       let respText;
       tryBtnEl.disabled = true;
       const startTime = performance.now();
-      fetchResponse = await fetch(fetchRequest);
+      fetchResponse = await fetch(fetchRequest, { signal });
       const endTime = performance.now();
       responseClone = fetchResponse.clone(); // create a response clone to allow reading response body again (response.json, response.text etc)
       tryBtnEl.disabled = false;
@@ -1391,7 +1407,7 @@ export default class ApiRequest extends LitElement {
         }
         if (this.responseIsBlob) {
           const contentDisposition = fetchResponse.headers.get('content-disposition');
-          this.respContentDisposition = contentDisposition ? contentDisposition.split('filename=')[1].replace(/\\"/g, '') : 'filename';
+          this.respContentDisposition = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"|'/g, '') : 'filename';
           respBlob = await fetchResponse.blob();
           this.responseBlobUrl = URL.createObjectURL(respBlob);
         }
@@ -1412,17 +1428,27 @@ export default class ApiRequest extends LitElement {
       }));
     } catch (err) {
       tryBtnEl.disabled = false;
-      this.responseMessage = `${err.message} (CORS or Network Issue)`;
-      document.dispatchEvent(new CustomEvent('after-try', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          err,
-          request: fetchRequest,
-          response: responseClone,
-          responseStatus: responseClone.ok,
-        },
-      }));
+      if (err.name === 'AbortError') {
+        this.dispatchEvent(new CustomEvent('request-aborted', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            err,
+            request: fetchRequest,
+          },
+        }));
+        this.responseMessage = 'Request Aborted';
+      } else {
+        this.dispatchEvent(new CustomEvent('after-try', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            err,
+            request: fetchRequest,
+          },
+        }));
+        this.responseMessage = `${err.message} (CORS or Network Issue)`;
+      }
     }
     this.requestUpdate();
   }

package/src/components/api-response.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
 import FontStyles from '~/styles/font-styles';
 import FlexStyles from '~/styles/flex-styles';
@@ -34,6 +34,7 @@ export default class ApiResponse extends LitElement {
       schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
       allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },
+      schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },
       schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },
     };
   }
@@ -118,8 +119,8 @@ export default class ApiResponse extends LitElement {
           mimeResp,
           mimeRespObj.examples,
           mimeRespObj.example,
-          true,
-          false,
+          !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+          !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
           mimeResp.includes('json') ? 'json' : 'text',
         );
         allMimeResp[mimeResp] = {
@@ -154,7 +155,7 @@ export default class ApiResponse extends LitElement {
                     }
                   }}"
                   class='m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}'
-                  part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status"
+                  part="btn ${this.selectedStatus === respStatus ? 'btn-response-status btn-selected-response-status' : ' btn-response-status'}"
                   style='margin: 8px 4px 0 0'
                 > 
                   ${respStatus} 
@@ -179,8 +180,8 @@ export default class ApiResponse extends LitElement {
             : html`  
               <div class="tab-panel col">
                 <div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
-                  <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
                   <button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
+                  <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
                   <div style="flex:1"></div>
                   ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
                     ? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`
@@ -258,6 +259,7 @@ export default class ApiResponse extends LitElement {
                 render-style = '${this.renderStyle}'
                 .data="${mimeRespDetails.examples[0].exampleValue}"
                 class = 'example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'
+                exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy" 
               ></json-tree>`
             : html`
               ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
@@ -281,6 +283,7 @@ export default class ApiResponse extends LitElement {
                     <json-tree 
                       render-style = '${this.renderStyle}'
                       .data = '${v.exampleValue}'
+                      exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy" 
                     ></json-tree>`
                   : html`<pre>${v.exampleValue}</pre>`
                 }
@@ -307,7 +310,7 @@ export default class ApiResponse extends LitElement {
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = "false"
+            schema-hide-read-only = "${this.schemaHideReadOnly}"
             schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree> `
         : html`
@@ -317,7 +320,7 @@ export default class ApiResponse extends LitElement {
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = "false"
+            schema-hide-read-only = "${this.schemaHideReadOnly}"
             schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree>`
       }`;

package/src/components/dialog-box.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import DialogBoxStyles from '~/styles/dialog-box-styles';
 
 export default class DialogBox extends LitElement {

package/src/components/json-tree.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { copyToClipboard } from '~/utils/common-utils';
 import FontStyles from '~/styles/font-styles';
 import BorderStyles from '~/styles/border-styles';
@@ -35,18 +35,29 @@ export default class JsonTree extends LitElement {
         text-align: left;
       }
 
-      .open-bracket{
+      .open-bracket {
         display:inline-block;
         padding: 0 20px 0 0;
         cursor:pointer;
         border: 1px solid transparent;
         border-radius:3px;
       }
-      .open-bracket:hover{
+      .close-bracket {
+        border: 1px solid transparent;
+        border-radius:3px;
+        display:inline-block;
+      }
+      .open-bracket:hover {
         color:var(--primary-color);
         background-color:var(--hover-color);
         border: 1px solid var(--border-color);
       }
+      .open-bracket.expanded:hover ~ .inside-bracket {
+        border-left: 1px solid var(--fg3);
+      }
+      .open-bracket.expanded:hover ~ .close-bracket {
+        color:var(--primary-color);
+      }
       .inside-bracket{
         padding-left:12px;
         border-left:1px dotted var(--border-color);
@@ -78,7 +89,7 @@ export default class JsonTree extends LitElement {
     return html`
       <div class = "json-tree" >
         <div class='toolbar'> 
-          <button class="toolbar-btn" part="btn btn-fill" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
+          <button class="toolbar-btn" part="btn btn-fill btn-copy" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
         </div>
         ${this.generateTree(this.data, true)}
       </div>