rapidoc 9.3.6 → 9.3.8

package/{index1.html → index_bak.html}

@@ -5,6 +5,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>RapiDoc</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css">
+  <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
 </head>
 
 <script>
@@ -26,27 +28,32 @@
     https://assets.zuora.com/zuora-documentation/swagger.yaml <<< Large spec with lot of markdown
     ./specs/petstore_anyof.yaml <<< contains complex one-of with inline primitives and recursive objects
     ./specs/oneof1.yaml  <<< nested oneof
+    https://cesdev.eng.sonicwall.com/api/q/openapi
 -->
 <rapi-doc 
-  spec-url = "./specs/petstore.yaml"
-  route-prefix="#tab-pets/"
+  spec-url = "./specs/temp.yaml" 
   id="thedoc" 
   theme = "dark"
-  render-style="read" 
+  render-style="focused" 
   schema-style="tree"
-  use-path-in-nav-bar="true"
+  show-method-in-nav-bar = "true"
+  use-path-in-nav-bar = "true"
   show-components = "true"
   show-info = "true"
   show-header = "true"
-  allow-search = "false"  
+  allow-search = "true"  
   allow-advanced-search = "true"
   allow-spec-url-load="false"
-  allow-spec-file-load="false"
   allow-spec-file-download="true"
   allow-server-selection = "true"
   allow-authentication	= "true"
+  update-route="false"
+  remove-endpoints-with-badge-label-as="one"
   match-type="regex"
   persist-auth="true"
+  scroll-behavior="smooth"
+  allow-try = "false"
+  show-curl-before-try = "true"
 ></rapi-doc>
 <!--
   <rapi-doc-mini

package/jsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": ".",
     // Relative to "baseUrl"
     "paths": {
-      "@/*": ["./src/*"],
+      "~/*": ["./src/*"],
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "9.3.6",
+  "version": "9.3.8",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <mrin9@yahoo.com>",
   "homepage": "https://rapidocweb.com",
@@ -33,10 +33,10 @@
   "module": "dist/rapidoc-min.js",
   "mode": "production",
   "dependencies": {
-    "@apitools/openapi-parser": "0.0.32",
+    "@apitools/openapi-parser": "0.0.33",
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
-    "lit": "^3.2.0",
+    "lit": "^3.2.1",
     "marked": "4.3.0",
     "prismjs": "^1.29.0",
     "randexp": "^0.5.3",
@@ -52,9 +52,9 @@
     "lint-fix": "./node_modules/eslint/bin/eslint.js --fix ./src/**"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/core": "^7.25.8",
+    "@babel/eslint-parser": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
     "babel-loader": "^9.2.1",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -63,7 +63,7 @@
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-webpack": "^0.13.9",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-webpack-plugin": "4.2.0",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^8.0.0",
@@ -72,7 +72,7 @@
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "unminified-webpack-plugin": "^3.0.0",
-    "webpack": "^5.94.0",
+    "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "4.11.1"

package/src/components/api-request.js

@@ -2,6 +2,7 @@ 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 { ifDefined } from 'lit/directives/if-defined.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import formatXml from 'xml-but-prettier';
 import Prism from 'prismjs';
@@ -20,7 +21,7 @@ import { schemaInObjectNotation,
   normalizeExamples,
   getSchemaFromParam,
   json2xml,
-  nestExampleIfPresent,
+  standardizeExample,
   anyExampleWithSummaryOrDescription } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
@@ -99,6 +100,9 @@ export default class ApiRequest extends LitElement {
       TabStyles,
       PrismStyles,
       css`
+        :host {
+          container-type: inline-size;
+        }
         *, *:before, *:after { box-sizing: border-box; }
         :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
         :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
@@ -183,13 +187,13 @@ export default class ApiRequest extends LitElement {
           opacity: 1;
         }
 
-        @media only screen and (min-width: 768px) {
+        @container (min-width: 768px) {
           .textarea {
             padding:8px;
           }
         }
 
-        @media only screen and (max-width: 470px) {
+        @container (max-width: 470px) {
           .hide-in-small-screen {
             display:none;
           }
@@ -199,6 +203,7 @@ export default class ApiRequest extends LitElement {
     ];
   }
 
+  /* eslint-disable indent */
   render() {
     return html`
     <div class="col regular-font request-panel ${'read focused'.includes(this.renderStyle) || this.callback === 'true' ? 'read-mode' : 'view-mode'}">
@@ -270,7 +275,6 @@ export default class ApiRequest extends LitElement {
     }
   }
 
-  /* eslint-disable indent */
   renderExample(example, paramType, paramName) {
     return html`
       ${paramType === 'array' ? '[' : ''}
@@ -353,7 +357,7 @@ export default class ApiRequest extends LitElement {
       let paramStyle = 'form';
       let paramExplode = true;
       let paramAllowReserved = false;
-      if (paramType === 'query') {
+      if (paramType === 'query' || paramType === 'header' || paramType === 'path') {
         if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
           paramStyle = param.style;
         } else if (serializeStyle) {
@@ -368,12 +372,12 @@ export default class ApiRequest extends LitElement {
       }
       // openapi 3.1.0 spec based examples (which must be Object(string : { value:any, summary?: string, description?: string})
       const example = normalizeExamples(
-        (param.examples
-          || nestExampleIfPresent(param.example)
-          || nestExampleIfPresent(mimeTypeElem?.example)
-          || mimeTypeElem?.examples
-          || nestExampleIfPresent(paramSchema.examples)
-          || nestExampleIfPresent(paramSchema.example)
+        (standardizeExample(param.examples)
+          || standardizeExample(param.example)
+          || standardizeExample(mimeTypeElem?.example)
+          || standardizeExample(mimeTypeElem?.examples)
+          || standardizeExample(paramSchema.examples)
+          || standardizeExample(paramSchema.example)
         ),
         paramSchema.type,
       );
@@ -381,8 +385,8 @@ export default class ApiRequest extends LitElement {
         example.exampleVal = generateExample(
           declaredParamSchema,
           serializeStyle || 'json',
-          '',
-          '',
+          {},
+          {},
           this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
           this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
           true,
@@ -395,7 +399,10 @@ export default class ApiRequest extends LitElement {
       <tr title="${param.deprecated ? 'Deprecated' : ''}"> 
         <td rowspan="${this.allowTry === 'true' ? '1' : '2'}" style="width:${labelColWidth}; min-width:100px;">
           <div class="param-name ${param.deprecated ? 'deprecated' : ''}" >
-            ${param.deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+            ${param.deprecated
+              ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+              : ''
+            }
             ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}
             ${param.name}
           </div>
@@ -412,6 +419,7 @@ export default class ApiRequest extends LitElement {
               ${paramSchema.type === 'array'
                 ? html`
                   <tag-input class="request-param" 
+                    id = "tag-input-request-param-${param.name}"
                     style = "width:100%" 
                     data-ptype = "${paramType}"
                     data-pname = "${param.name}"
@@ -430,58 +438,60 @@ export default class ApiRequest extends LitElement {
                   </tag-input>`
                 : paramSchema.type === 'object'
                   ? html`
-                    <div class="tab-panel col" style="border-width:0 0 1px 0;">
-                      <div class="tab-buttons row" @click="${(e) => {
+                    <div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
+                      <div part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
                         if (e.target.tagName.toLowerCase() === 'button') {
                           const newState = { ...this.activeParameterSchemaTabs };
                           newState[param.name] = e.target.dataset.tab;
                           this.activeParameterSchemaTabs = newState;
                         }
                       }}">
-                        <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>
+                        <button part="tab-btn" class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
+                        <button part="tab-btn" 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">
-                          <textarea 
-                            class = "textarea request-param"
-                            part = "textarea textarea-param"
-                            data-ptype = "${paramType}-object"
-                            data-pname = "${param.name}"
-                            data-example = "${example.exampleVal}"
-                            data-param-serialize-style = "${paramStyle}"
-                            data-param-serialize-explode = "${paramExplode}"
-                            data-param-allow-reserved = "${paramAllowReserved}"
-                            data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
-                            spellcheck = "false"
-                            .textContent="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? (typeof example.exampleVal === 'object' ? JSON.stringify(example.exampleVal, null, 2) : example.exampleVal) : '')}"
-                            style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
-                            @input=${(e) => {
-                              const requestPanelEl = this.getRequestPanel(e);
-                              this.liveCURLSyntaxUpdate(requestPanelEl);
-                            }}
-                          ></textarea>
-                        </div>`
-                        : html`
-                          <div class="tab-content col">
-                            <schema-tree
-                              class = 'json'
-                              style = 'display: block'
-                              .data = '${schemaAsObj}'
-                              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 = "${this.schemaHideWriteOnly.includes(this.method)}"
-                              exportparts = "wrap-request-btn:wrap-request-btn, 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>`
-                        }
-                    </div>`
+
+                    ${html`<div part="tab-content" class="tab-content col" data-tab = 'example' style="display:${this.activeParameterSchemaTabs[param.name] === 'example' ? 'block' : 'none'}; padding-left:5px; width:100%">
+                        <textarea 
+                          id = "textarea-request-param-${param.name}"
+                          class = "textarea request-param"
+                          part = "textarea textarea-param"
+                          data-ptype = "${paramType}-object"
+                          data-pname = "${param.name}"
+                          data-example = "${example.exampleVal}"
+                          data-param-serialize-style = "${paramStyle}"
+                          data-param-serialize-explode = "${paramExplode}"
+                          data-param-allow-reserved = "${paramAllowReserved}"
+                          data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
+                          spellcheck = "false"
+                          .textContent="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? (typeof example.exampleVal === 'object' ? JSON.stringify(example.exampleVal, null, 2) : example.exampleVal) : '')}"
+                          style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
+                          @input=${(e) => {
+                            const requestPanelEl = this.getRequestPanel(e);
+                            this.liveCURLSyntaxUpdate(requestPanelEl);
+                          }}
+                        ></textarea>
+                      </div>`
+                    }
+                    ${html`<div part="tab-content" class="tab-content col" data-tab = 'schema' style="display:${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;">
+                        <schema-tree
+                          class = 'json'
+                          style = 'display: block'
+                          .data = '${schemaAsObj}'
+                          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 = "${this.schemaHideWriteOnly.includes(this.method)}"
+                          exportparts = "wrap-request-btn:wrap-request-btn, 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>`
+                    }
+                  </div>`
                   : html`
                     <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%" 
+                      id="input-request-param-${param.name}"
                       class="request-param"
                       part="textbox textbox-param"
                       data-ptype="${paramType}"
@@ -641,8 +651,8 @@ export default class ApiRequest extends LitElement {
           reqBodyExamples = generateExample(
             reqBody.schema,
             reqBody.mimeType,
-            reqBody.examples,
-            reqBody.example,
+            standardizeExample(reqBody.examples),
+            standardizeExample(reqBody.example),
             this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
             this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
             'text',
@@ -725,7 +735,7 @@ export default class ApiRequest extends LitElement {
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyFileInputHtml = html`
             <div class = "small-font-size bold-text row">
-              <input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false" />
+              <input id="input-request-body-param-file" type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false" />
             </div>  
           `;
         }
@@ -780,13 +790,13 @@ export default class ApiRequest extends LitElement {
         
         ${(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 = 'example'>EXAMPLE</button>
-                <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
+            <div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
+              <div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
+                <button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
+                <button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
               </div>
-              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
-              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
+              ${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
+              ${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
             </div>`
           : html`  
             ${reqBodyFileInputHtml}
@@ -802,8 +812,8 @@ export default class ApiRequest extends LitElement {
     const formdataPartExample = generateExample(
       fieldSchema,
       'json',
-      fieldSchema.examples,
-      fieldSchema.example,
+      standardizeExample(fieldSchema.examples),
+      standardizeExample(fieldSchema.example),
       this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
       this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
       'text',
@@ -811,7 +821,7 @@ export default class ApiRequest extends LitElement {
     );
 
     return html`
-      <div class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
+      <div part="tab-panel" class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
         <div style="width:24px; background-color:var(--light-border-color)">
           <div class="row" style="flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;" @click="${(e) => {
           if (e.target.classList.contains('v-tab-btn')) {
@@ -852,7 +862,7 @@ export default class ApiRequest extends LitElement {
       ${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}'
+            .data = "${formdataPartSchema}"
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
@@ -1014,7 +1024,7 @@ export default class ApiRequest extends LitElement {
   curlSyntaxTemplate(display = 'flex') {
     return html`
       <div class="col m-markdown" style="flex:1; display:${display}; position:relative; max-width: 100%;">
-        <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
+        <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.trim().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>
       `;
@@ -1045,22 +1055,22 @@ export default class ApiRequest extends LitElement {
         <div style="flex:1"></div>
         <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) => {
+      <div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
+        <div id="tab_buttons" part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
             if (e.target.classList.contains('tab-btn') === false) { return; }
             this.activeResponseTab = e.target.dataset.tab;
         }}">
-          <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
-          <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}"  data-tab = 'headers' > RESPONSE HEADERS</button>
+          <button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
+          <button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}"  data-tab = 'headers' > RESPONSE HEADERS</button>
           ${this.showCurlBeforeTry === 'true'
             ? ''
-            : html`<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
+            : html`<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
         </div>
         ${this.responseIsBlob
           ? html`
-            <div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
+            <div part="tab-content" 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, 400px); object-fit:contain;" class="mar-top-8" src="${this.responseBlobUrl}"></img>`
+                ? html`<img style="max-height:var(--resp-area-height, 400px); object-fit:contain;" class="mar-top-8" src="${ifDefined(this.responseBlobUrl)}"></img>`
                 : ''
               }  
               <button class="m-btn thin-border mar-top-8" style="width:135px" @click='${(e) => { downloadResource(this.responseBlobUrl, this.respContentDisposition, e); }}' part="btn btn-outline">
@@ -1072,12 +1082,12 @@ 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 part="tab-content" 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; min-height:50px; height:var(--resp-area-height, 400px); resize:vertical; overflow:auto">${responseContent}</pre>
             </div>`
         }
-        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
+        <div part="tab-content" 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>
@@ -1086,18 +1096,8 @@ export default class ApiRequest extends LitElement {
   }
 
   apiCallTemplate() {
-    let selectServerDropdownHtml = '';
-
-    if (this.servers && this.servers.length > 0) {
-      selectServerDropdownHtml = html`
-        <select style="min-width:100px;" @change='${(e) => { this.serverUrl = e.target.value; }}'>
-          ${this.servers.map((v) => html`<option value = "${v.url}"> ${v.url} - ${v.description} </option>`)}
-        </select>
-      `;
-    }
     const selectedServerHtml = html`
       <div style="display:flex; flex-direction:column;">
-        ${selectServerDropdownHtml}
         ${this.serverUrl
           ? html`
             <div style="display:flex; align-items:baseline;">
@@ -1127,7 +1127,7 @@ export default class ApiRequest extends LitElement {
                       : `${this.api_keys.length} API keys applied`
                     } 
                   </div>`
-                : html`<div class="gray-text">Required  <span style="color:var(--red)">(None Applied)</span>`
+                : html`<div class="gray-text">Required  <span style="color:var(--red)">(None Applied)</span> </div>`
               }`
             : html`<span class="gray-text"> Not Required </span>`
           }
@@ -1263,7 +1263,7 @@ export default class ApiRequest extends LitElement {
               }
             }
           }
-        } catch (err) {
+        } catch {
           console.error('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
         if (queryParam.toString()) {
@@ -1301,7 +1301,7 @@ export default class ApiRequest extends LitElement {
 
   buildFetchHeaders(requestPanelEl) {
     const respEl = this.closest('.expanded-req-resp-container, .req-resp-container')?.getElementsByTagName('api-response')[0];
-    const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
+    const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header'], [data-ptype='header-object']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
     const acceptHeader = respEl?.selectedMimeType;
     const reqHeaders = new Headers();
@@ -1322,7 +1322,38 @@ export default class ApiRequest extends LitElement {
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
-        reqHeaders.append(el.dataset.pname, el.value);
+        if (el.dataset.ptype === 'header-object') {
+          /* CONVERT
+            a header value from below object style
+              {
+                "key1": "val1",
+                "key2": {
+                  "key2_1": "val2_1",
+                  "key2_2": {
+                    "key2_2_1": "val2_2_1"
+                  }
+                },
+                "key3": "val3"
+              };
+
+            TO >>>
+              key1=val1, key2={"key2_1":"val2_1","key2_2":{"key2_2_1":"val2_2_1"}}, key3=val3
+          */
+          const headerObjVal = JSON.parse(el.value.replace(/\n/g, '').trim());
+          const firstLevelKeySeparator = el.dataset.paramSerializeExplode === 'true' ? '=' : ',';
+          const headerStrVal = Object.keys(headerObjVal)
+            .map((key) => {
+              const value = headerObjVal[key];
+              if (typeof value === 'object') {
+                return `${key}${firstLevelKeySeparator}${JSON.stringify(value)}`;
+              }
+              return `${key}${firstLevelKeySeparator}${value}`;
+            })
+            .join(',');
+          reqHeaders.append(el.dataset.pname, headerStrVal);
+        } else {
+          reqHeaders.append(el.dataset.pname, el.value);
+        }
       }
     });
 
@@ -1334,7 +1365,6 @@ export default class ApiRequest extends LitElement {
         reqHeaders.append('Content-Type', requestBodyType);
       }
     }
-
     return reqHeaders;
   }
 
@@ -1497,11 +1527,12 @@ export default class ApiRequest extends LitElement {
         respHeadersObj[hdr] = hdrVal;
         this.responseHeaders = `${this.responseHeaders}${hdr}: ${hdrVal}\n`;
       });
-      const contentType = fetchResponse.headers.get('content-type').split(';')[0].trim();
+      let contentType = fetchResponse.headers.get('content-type');
       const respEmpty = (await fetchResponse.clone().text()).length === 0;
       if (respEmpty) {
         this.responseText = '';
       } else if (contentType) {
+        contentType = contentType.split(';')[0].trim();
         if (contentType === 'application/x-ndjson') {
           this.responseText = await fetchResponse.text();
         } else if (contentType.includes('json')) {
@@ -1542,8 +1573,21 @@ 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';
+          const contentDisposition = fetchResponse.headers.get('content-disposition') || '';
+          let filenameFromContentDeposition = 'filename';
+          if (contentDisposition) {
+            const filenameStarRegexMatch = contentDisposition.match(/filename\*=\s*UTF-8''([^;]+)/); // Support Headers like >>> Content-Disposition: attachment; filename*=UTF-8''example%20file.pdf
+            if (filenameStarRegexMatch) {
+              filenameFromContentDeposition = decodeURIComponent(filenameStarRegexMatch[1]); // the filename* format in the Content-Disposition header follows RFC 5987, which allows encoding non-ASCII characters using percent encoding. so example%20file.pdf becomes example file.pdf
+            } else {
+              // Fallback to the regular filename format
+              const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/); // Content-Disposition: attachment; filename=example.pdf
+              if (filenameMatch) {
+                filenameFromContentDeposition = filenameMatch[1];
+              }
+            }
+          }
+          this.respContentDisposition = filenameFromContentDeposition;
           respBlob = await fetchResponse.blob();
           this.responseBlobUrl = URL.createObjectURL(respBlob);
         }
@@ -1635,7 +1679,7 @@ export default class ApiRequest extends LitElement {
       fetchHeaders.set(key, tempHeaderArray.join(', '));
     });
 
-    curlHeaders = Array.from(fetchHeaders).map(([key, value]) => ` -H "${key}: ${value}"`).join('\\\n');
+    curlHeaders = Array.from(fetchHeaders).map(([key, value]) => ` -H '${key}: ${value}'`).join('\\\n');
     if (curlHeaders) {
       curlHeaders = `${curlHeaders} \\\n`;
     }
@@ -1667,7 +1711,7 @@ export default class ApiRequest extends LitElement {
         if (requestBodyType.includes('json')) {
           try {
             curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
-          } catch (err) {
+          } catch {
             // Ignore.
           }
         }