rapidoc 9.3.4 → 9.3.5

package/index.html

@@ -31,7 +31,7 @@
     https://cesdev.eng.sonicwall.com/api/q/openapi
 -->
 <rapi-doc 
-  spec-url = "./specs/temp.yaml" 
+  spec-url = "./specs/petstore.yaml" 
   id="thedoc" 
   theme = "dark"
   render-style="view" 
@@ -50,6 +50,7 @@
   update-route="false"
   match-type="regex"
   persist-auth="true"
+  scroll-behavior="smooth"
 ></rapi-doc>
 <!--
   <rapi-doc-mini

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "9.3.4",
+  "version": "9.3.5",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <mrin9@yahoo.com>",
   "homepage": "https://rapidocweb.com",
@@ -33,12 +33,13 @@
   "module": "dist/rapidoc-min.js",
   "mode": "production",
   "dependencies": {
-    "@apitools/openapi-parser": "0.0.30",
+    "@apitools/openapi-parser": "0.0.32",
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
-    "lit": "^2.6.1",
-    "marked": "^4.2.12",
+    "lit": "^3.2.0",
+    "marked": "4.3.0",
     "prismjs": "^1.29.0",
+    "randexp": "^0.5.3",
     "xml-but-prettier": "^1.0.1"
   },
   "scripts": {
@@ -51,32 +52,32 @@
     "lint-fix": "./node_modules/eslint/bin/eslint.js --fix ./src/**"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-env": "^7.20.2",
-    "babel-loader": "^9.1.2",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.4",
+    "babel-loader": "^9.2.1",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "clean-webpack-plugin": "^4.0.0",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "^6.7.3",
-    "eslint": "^8.32.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-import": "^2.27.0",
-    "eslint-webpack-plugin": "3.2.0",
+    "eslint-import-resolver-webpack": "^0.13.9",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-webpack-plugin": "4.2.0",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^8.0.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.0",
     "inspectpack": "^4.7.1",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "unminified-webpack-plugin": "^3.0.0",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "4.11.1"
   },
   "engines": {
-    "node": ">=10.21.0"
+    "node": ">=18.16.0"
   }
 }

package/src/components/api-request.js

@@ -279,7 +279,8 @@ export default class ApiRequest extends LitElement {
         style="display:inline-block; min-width:24px; text-align:center"
         class="${this.allowTry === 'true' ? '' : 'inactive-link'}"
         data-example-type="${paramType === 'array' ? paramType : 'string'}"
-        data-example="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : example.value || ''}"
+        data-example="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : (typeof example.value === 'object' ? JSON.stringify(example.value, null, 2) : example.value) || ''}"
+        title="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : (typeof example.value === 'object' ? JSON.stringify(example.value, null, 2) : example.value) || ''}"
         @click="${(e) => {
           const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
           if (inputEl) {
@@ -453,7 +454,7 @@ export default class ApiRequest extends LitElement {
                             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' ? example.exampleVal : '')}"
+                            .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);
@@ -691,6 +692,12 @@ export default class ApiRequest extends LitElement {
                       const requestPanelEl = this.getRequestPanel(e);
                       this.liveCURLSyntaxUpdate(requestPanelEl);
                     }}
+                    @keydown=${(e) => {
+                      if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey) {
+                        return this.onTryClick(e);
+                      }
+                    }}
+
                   ></textarea>
                 </div>  
               `)}
@@ -907,7 +914,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(fieldExamples) ? fieldExamples.join('~|~') : fieldExamples}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
-                    .value = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : [fieldExamples[0]] : [fieldExamples]}"
+                    .value = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : fieldExamples : []}"
                   >
                   </tag-input>
                 `
@@ -1052,10 +1059,14 @@ export default class ApiRequest extends LitElement {
         ${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, 400px); object-fit:contain;" class="mar-top-8" src="${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">
                 DOWNLOAD
               </button>
-              ${this.responseBlobType === 'view'
+              ${this.responseBlobType === 'view' || this.responseBlobType === 'image'
                 ? html`<button class="m-btn thin-border mar-top-8" style="width:135px"  @click='${(e) => { viewResource(this.responseBlobUrl, e); }}' part="btn btn-outline">VIEW (NEW TAB)</button>`
                 : ''
               }
@@ -1217,7 +1228,7 @@ export default class ApiRequest extends LitElement {
         const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
-          const { paramSerializeStyle, paramSerializeExplode } = el.dataset;
+          const { paramSerializeStyle, paramSerializeExplode, pname } = el.dataset;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
           if (el.dataset.paramAllowReserved === 'true') {
             queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
@@ -1230,24 +1241,25 @@ export default class ApiRequest extends LitElement {
             }
           } else {
             for (const key in queryParamObj) {
+              const pKey = `${pname}[${key}]`;
               if (typeof queryParamObj[key] === 'object') {
                 if (Array.isArray(queryParamObj[key])) {
                   if (paramSerializeStyle === 'spaceDelimited') {
-                    queryParam.append(key, queryParamObj[key].join(' '));
+                    queryParam.append(pKey, queryParamObj[key].join(' '));
                   } else if (paramSerializeStyle === 'pipeDelimited') {
-                    queryParam.append(key, queryParamObj[key].join('|'));
+                    queryParam.append(pKey, queryParamObj[key].join('|'));
                   } else {
                     if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
                       queryParamObj[key].forEach((v) => {
-                        queryParam.append(key, v);
+                        queryParam.append(pKey, v);
                       });
                     } else {
-                      queryParam.append(key, queryParamObj[key]);
+                      queryParam.append(pKey, queryParamObj[key]);
                     }
                   }
                 }
               } else {
-                queryParam.append(key, queryParamObj[key]);
+                queryParam.append(pKey, queryParamObj[key]);
               }
             }
           }
@@ -1459,6 +1471,23 @@ export default class ApiRequest extends LitElement {
       const startTime = performance.now();
       fetchResponse = await fetch(fetchRequest, { signal });
       const endTime = performance.now();
+      // Allow to modify response
+      /*
+      let resolveModifiedResponse; // Create a promise that will be resolved from the event listener
+      const modifiedResponsePromise = new Promise((resolve) => {
+        resolveModifiedResponse = resolve;
+      });
+      this.dispatchEvent(new CustomEvent('fetched-try', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          request: fetchRequest,
+          response: fetchResponse,
+          resolveModifiedResponse, // pass the resolver function
+        },
+      }));
+      fetchResponse = await modifiedResponsePromise; // Wait for the modified response
+      */
       responseClone = fetchResponse.clone(); // create a response clone to allow reading response body again (response.json, response.text etc)
       tryBtnEl.disabled = false;
       this.responseMessage = html`${fetchResponse.statusText ? `${fetchResponse.statusText}:${fetchResponse.status}` : fetchResponse.status} <div style="color:var(--light-fg)"> Took ${Math.round(endTime - startTime)} milliseconds </div>`;
@@ -1498,6 +1527,9 @@ export default class ApiRequest extends LitElement {
         } else if (/^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$|^application\/vnd\./.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'download';
+        } else if (/^image/.test(contentType)) {
+          this.responseIsBlob = true;
+          this.responseBlobType = 'image';
         } else if (/^audio|^image|^video/.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'view';
@@ -1597,6 +1629,12 @@ export default class ApiRequest extends LitElement {
 
     curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
 
+    fetchHeaders.forEach((value, key) => {
+      let tempHeaderArray = value.split(',');
+      tempHeaderArray = tempHeaderArray.map((el) => el.trim()).filter((string, index) => tempHeaderArray.indexOf(string) === index);
+      fetchHeaders.set(key, tempHeaderArray.join(', '));
+    });
+
     curlHeaders = Array.from(fetchHeaders).map(([key, value]) => ` -H "${key}: ${value}"`).join('\\\n');
     if (curlHeaders) {
       curlHeaders = `${curlHeaders} \\\n`;

package/src/components/schema-table.js

@@ -123,7 +123,7 @@ export default class SchemaTable extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '', isDeprecated = false) {
     if (this.schemaHideReadOnly === 'true') {
       if (dataType === 'array') {
         if (readOrWrite === 'readonly') {
@@ -198,8 +198,8 @@ export default class SchemaTable extends LitElement {
       return html`
         ${newSchemaLevel >= 0 && key
           ? html`
-            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${data['::deprecated'] ? 'Deprecated' : ''}">
-              <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
+            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${isDeprecated || data['::deprecated'] ? 'Deprecated' : ''}">
+              <div class="td key ${isDeprecated || data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
                     <span class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}' data-obj='${keyLabel}'>
@@ -210,8 +210,8 @@ export default class SchemaTable extends LitElement {
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
                   ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
                   : keyLabel.endsWith('*')
-                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -239,10 +239,10 @@ export default class SchemaTable extends LitElement {
           ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, '')}`
           : html`
             ${Object.keys(data).map((dataKey) => html`
-              ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel'].includes(dataKey)
+              ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
                 ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                   ? html`${this.generateTree(
-                    data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
+                      data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
                       data[dataKey]['::type'],
                       data[dataKey]['::array-type'] || '',
                       dataKey,
@@ -261,6 +261,7 @@ export default class SchemaTable extends LitElement {
                   newSchemaLevel,
                   newIndentLevel,
                   data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                  isDeprecated || data[dataKey]['::deprecated'],
                 )}`
               }
             `)}
@@ -294,9 +295,9 @@ export default class SchemaTable extends LitElement {
         </div>`;
     }
     return html`
-      <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
-        <div class="td key ${deprecated}" style='padding-left:${leftPadding}px'>
-          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+      <div class = "tr primitive" title="${isDeprecated || deprecated ? 'Deprecated' : ''}">
+        <div class="td key ${isDeprecated || deprecated ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
+          ${isDeprecated || deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel?.endsWith('*')
             ? html`
               <span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span>

package/src/components/schema-tree.js

@@ -186,9 +186,9 @@ export default class SchemaTree extends LitElement {
         closeBracket = '}]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket object">{</span>`;
+          openBracket = html`<span class="open-bracket object">${data['::nullable'] ? 'null┃' : ''}{</span>`;
         } else {
-          openBracket = html`<span class="open-bracket object">{...}</span>`;
+          openBracket = html`<span class="open-bracket object">${data['::nullable'] ? 'null┃' : ''}{...}</span>`;
         }
         closeBracket = '}';
       }
@@ -212,7 +212,7 @@ export default class SchemaTree extends LitElement {
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
           <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
             ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
               ? html`<span class='key-label xxx-of-key'> ${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
@@ -234,7 +234,7 @@ export default class SchemaTree extends LitElement {
             ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
-                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel'].includes(dataKey)
+                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
                   ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                     ? html`${this.generateTree(
                       data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -351,6 +351,7 @@ export default class SchemaTree extends LitElement {
 
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
+    const nullable = rowEl.classList.contains('nullable');
     if (rowEl.classList.contains('expanded')) {
       rowEl.classList.replace('expanded', 'collapsed');
       e.target.innerHTML = e.target.classList.contains('array-of-object')
@@ -359,7 +360,7 @@ export default class SchemaTree extends LitElement {
           ? '[[...]]'
           : e.target.classList.contains('array')
             ? '[...]'
-            : '{...}';
+            : `${nullable ? 'null┃' : ''}{...}`;
     } else {
       rowEl.classList.replace('collapsed', 'expanded');
       e.target.innerHTML = e.target.classList.contains('array-of-object')
@@ -367,7 +368,7 @@ export default class SchemaTree extends LitElement {
         : e.target.classList.contains('array-of-array')
           ? `[[ ${e.target.dataset.arrayType}`
           : e.target.classList.contains('object')
-            ? '{'
+            ? `${nullable ? 'null┃' : ''}{`
             : '[';
     }
   }

package/src/json-schema-viewer.js

@@ -287,6 +287,7 @@ export default class JsonSchemaViewer extends LitElement {
         specUrl,
         this.generateMissingTags === 'true',
         this.sortTags === 'true',
+        this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
       );
       this.loading = false;

package/src/rapidoc.js

@@ -55,6 +55,7 @@ export default class RapiDoc extends LitElement {
       routePrefix: { type: String, attribute: 'route-prefix' },
       specUrl: { type: String, attribute: 'spec-url' },
       sortTags: { type: String, attribute: 'sort-tags' },
+      sortSchemas: { type: String, attribute: 'sort-schemas' },
       generateMissingTags: { type: String, attribute: 'generate-missing-tags' },
       sortEndpointsBy: { type: String, attribute: 'sort-endpoints-by' },
       specFile: { type: String, attribute: false },
@@ -99,6 +100,7 @@ export default class RapiDoc extends LitElement {
       allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },
       showComponents: { type: String, attribute: 'show-components' },
       pageDirection: { type: String, attribute: 'page-direction' },
+      scrollBehavior: { type: String, attribute: 'scroll-behavior' },
 
       // Main Colors and Font
       theme: { type: String },
@@ -491,6 +493,7 @@ export default class RapiDoc extends LitElement {
     if (!this.updateRoute || !'true, false,'.includes(`${this.updateRoute},`)) { this.updateRoute = 'true'; }
     if (!this.routePrefix) { this.routePrefix = '#'; }
     if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
+    if (!this.sortSchemas || !'true, false,'.includes(`${this.sortSchemas},`)) { this.sortSchemas = 'false'; }
     if (!this.generateMissingTags || !'true, false,'.includes(`${this.generateMissingTags},`)) { this.generateMissingTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary, none,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
 
@@ -511,6 +514,7 @@ export default class RapiDoc extends LitElement {
     if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
     if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
+    if (!this.scrollBehavior || !'smooth, auto,'.includes(`${this.scrollBehavior},`)) { this.scrollBehavior = 'auto'; }
 
     if (!this.showAdvancedSearchDialog) { this.showAdvancedSearchDialog = false; }
 
@@ -726,6 +730,7 @@ export default class RapiDoc extends LitElement {
         specUrl,
         this.generateMissingTags === 'true',
         this.sortTags === 'true',
+        this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
         this.getAttribute('api-key-name'),
         this.getAttribute('api-key-location'),
@@ -860,7 +865,7 @@ export default class RapiDoc extends LitElement {
       window.setTimeout(() => {
         const gotoEl = this.shadowRoot.getElementById(tmpElementId);
         if (gotoEl) {
-          gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+          gotoEl.scrollIntoView({ behavior: this.scrollBehavior, block: 'start' });
           if (this.updateRoute === 'true') {
             this.replaceHistoryState(tmpElementId);
           }
@@ -904,7 +909,7 @@ export default class RapiDoc extends LitElement {
           if (this.updateRoute === 'true') {
             this.replaceHistoryState(entry.target.id);
           }
-          newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });
+          newNavEl.scrollIntoView({ behavior: this.scrollBehavior, block: 'center' });
           newNavEl.classList.add('active');
           newNavEl.part.add('section-navbar-active-item');
         }
@@ -925,7 +930,7 @@ export default class RapiDoc extends LitElement {
       if (e.target.getAttribute('href').startsWith('#')) {
         const gotoEl = this.shadowRoot.getElementById(e.target.getAttribute('href').replace('#', ''));
         if (gotoEl) {
-          gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+          gotoEl.scrollIntoView({ behavior: this.scrollBehavior, block: 'start' });
         }
       }
     }
@@ -978,7 +983,7 @@ export default class RapiDoc extends LitElement {
       const contentEl = this.shadowRoot.getElementById(elementId);
       if (contentEl) {
         isValidElementId = true;
-        contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+        contentEl.scrollIntoView({ behavior: this.scrollBehavior, block: 'start' });
       } else {
         isValidElementId = false;
       }
@@ -1005,7 +1010,7 @@ export default class RapiDoc extends LitElement {
 
         if (newNavEl) {
           if (scrollNavItemToView) {
-            newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });
+            newNavEl.scrollIntoView({ behavior: this.scrollBehavior, block: 'center' });
           }
           await sleep(0);
           const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');

package/src/templates/advance-search-template.js

@@ -59,9 +59,9 @@ export default function searchByPropertiesModalTemplate() {
           }
         }"
       > 
-        <span class="upper bold-text method-fg ${path.method}">${path.method}</span> 
-        <span>${path.path}</span>
-        <span class="regular-font gray-text">${path.summary}</span>
+        <span style="pointer-events: none" class="upper bold-text method-fg ${path.method}">${path.method}</span> 
+        <span style="pointer-events: none">${path.path}</span>
+        <span style="pointer-events: none" class="regular-font gray-text">${path.summary}</span>
       </div>
     `)
     }

package/src/templates/endpoint-template.js

@@ -204,7 +204,7 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
         ? html` 
           <div class='regular-font section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}'> 
             <div class='section-tag-header' @click="${() => { tag.expanded = !tag.expanded; this.requestUpdate(); }}">
-              <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div>
+              <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.displayName}</div>
             </div>
             <div class='section-tag-body'>
               <slot name="${tag.elementId}"></slot>

package/src/templates/expanded-endpoint-template.js

@@ -174,7 +174,7 @@ export default function expandedEndpointTemplate() {
   return html`
   ${this.resolvedSpec.tags.map((tag) => html`
     <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
-      <div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
+      <div class="title tag" part="section-tag-title label-tag-title">${tag.displayName}</div>
       <slot name="${tag.elementId}"></slot>
       <div class="regular-font-size">
       ${

package/src/templates/focused-endpoint-template.js

@@ -38,7 +38,7 @@ function defaultContentTemplate() {
 /* eslint-disable indent */
 function focusedTagBodyTemplate(tag) {
   return html`
-    <h1 id="${tag.elementId}">${tag.name}</h1>
+    <h1 id="${tag.elementId}">${tag.displayName}</h1>
     ${this.onNavTagClick === 'show-description' && tag.description
       ? html`
         <div class="m-markdown">

package/src/templates/navbar-template.js

@@ -181,7 +181,7 @@ export default function navbarTemplate() {
                   data-first-path-id='${tag.firstPathId}'
                   tabindex='0'
                 >
-                  <div style="pointer-events:none;">${tag.name}</div>
+                  <div style="pointer-events:none;">${tag.displayName}</div>
                   <div class='nav-bar-tag-icon' tabindex='0' data-action='expand-collapse-tag'></div>
                 </div>
               `
@@ -257,7 +257,7 @@ export default function navbarTemplate() {
               </div>
               ${component.subComponents.filter((p) => p.expanded !== false).map((p) => html`
                 <div class='nav-bar-path' data-action='navigate' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}'>
-                  <span> ${p.name} </span>
+                  <span style = 'pointer-events: none;'> ${p.name} </span>
                 </div>`)
               }`
             : ''))

package/src/templates/security-scheme-template.js

@@ -105,7 +105,7 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
   }
   if (sendClientSecretIn === 'header') {
     headers.set('Authorization', `Basic ${Buffer.from(`${clientId}:${clientSecret}`, 'utf8').toString('base64')}`);
-  } else {
+  } else if (grantType !== 'authorization_code') {
     urlFormParams.append('client_id', clientId);
     urlFormParams.append('client_secret', clientSecret);
   }
@@ -256,7 +256,7 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 
 /* eslint-disable indent */
 
-function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header') {
+function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header', receiveTokenInOptions = undefined) {
   let { authorizationUrl, tokenUrl, refreshUrl } = authFlow;
   const pkceOnly = authFlow['x-pkce-only'] || false;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
@@ -350,8 +350,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                   style = "margin:0 5px;${pkceOnly ? 'display:none;' : ''}"
                 >
                 <select style="margin-right:5px;${pkceOnly ? 'display:none;' : ''}" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
-                  <option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>
-                  <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>
+                   ${(!receiveTokenInOptions || receiveTokenInOptions.includes('header')) ? html`<option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>` : ''}
+                   ${(!receiveTokenInOptions || receiveTokenInOptions.includes('request-body')) ? html` <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>` : ''}
                 </select>`
               : ''
             }
@@ -483,6 +483,7 @@ export default function securitySchemeTemplate() {
                         v.flows[f],
                         (v.flows[f]['x-default-scopes'] || v['x-default-scopes']),
                         (v.flows[f]['x-receive-token-in'] || v['x-receive-token-in']),
+                        (v.flows[f]['x-receive-token-in-options'] || v['x-receive-token-in-options']),
                       ))}
                   </td>
                 </tr>

package/src/utils/common-utils.js

@@ -55,7 +55,7 @@ export function componentIsInSearch(searchVal, component) {
 
 export function pathIsInSearch(searchVal, path, matchType = 'includes') {
   if (matchType === 'includes') {
-    const stringToSearch = `${path.method} ${path.path} ${path.summary || path.description || ''} ${path.operationId || ''}`.toLowerCase();
+    const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''}`.toLowerCase();
     return stringToSearch.includes(searchVal.toLowerCase());
   }
   const regex = new RegExp(searchVal, 'i');