rapidoc 9.2.0 → 9.3.3

package/src/templates/endpoint-template.js

@@ -46,9 +46,9 @@ function onExpandCollapseAll(e, action = 'expand-all') {
 /* eslint-disable indent */
 function endpointHeadTemplate(path, pathsExpanded = false) {
   return html`
-  <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-    <div class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div> 
-    <div class="path ${path.deprecated ? 'deprecated' : ''}"> 
+  <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" part="section-endpoint-head-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
+    <div part="section-endpoint-head-method" class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div> 
+    <div  part="section-endpoint-head-path" class="path ${path.deprecated ? 'deprecated' : ''}"> 
       ${path.path} 
       ${path.isWebhook ? html`<span style="font-family: var(--font-regular); font-size: var(--); font-size: var(--font-size-small); color:var(--primary-color); margin-left: 16px"> Webhook</span>` : ''}
     </div>
@@ -62,7 +62,7 @@ function endpointHeadTemplate(path, pathsExpanded = false) {
     ${this.showSummaryWhenCollapsed
       ? html`
         <div class="only-large-screen" style="min-width:60px; flex:1"></div>
-        <div class="descr">${path.summary || path.shortSummary} </div>`
+        <div part="section-endpoint-head-description" class="descr">${path.summary || path.shortSummary} </div>`
       : ''
     }
   </summary>
@@ -88,19 +88,19 @@ function endpointBodyTemplate(path) {
 
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate(path.xCodeSamples) : '';
   return html`
-  <div class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
+  <div part="section-endpoint-body-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
     <div class="summary">
       ${path.summary
-        ? html`<div class="title">${path.summary}<div>`
+        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}<div>`
         : path.shortSummary !== path.description
-          ? html`<div class="title">${path.shortSummary}</div>`
+          ? html`<div class="title" part="section-endpoint-body-title">${path.shortSummary}</div>`
           : ''
       }
       ${path.xBadges && path.xBadges?.length > 0
         ? html`
           <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
             ${path.xBadges.map((v) => (
-                html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
               ))
             }
           </div>
@@ -108,7 +108,7 @@ function endpointBodyTemplate(path) {
         : ''
       }
 
-      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${path.description ? html`<div part="section-endpoint-body-description" class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
       <slot name="${path.elementId}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
       ${codeSampleTabPanel}
@@ -118,6 +118,7 @@ function endpointBodyTemplate(path) {
         <api-request
           class = "${this.renderStyle}-mode ${this.layout}-layout"
           style = "width:100%;"
+          webhook = "${path.isWebhook}"
           method = "${path.method}", 
           path = "${path.path}"
           .security = "${path.security}"
@@ -135,11 +136,12 @@ function endpointBodyTemplate(path) {
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-description-expanded = "${this.schemaDescriptionExpanded}"
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${this.schemaHideReadOnly}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           fetch-credentials = "${this.fetchCredentials}"
           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"
+            anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
         > </api-request>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -148,6 +150,7 @@ function endpointBodyTemplate(path) {
       <api-response
         class = "${this.renderStyle}-mode"
         style = "width:100%;"
+        webhook = "${path.isWebhook}"
         .responses="${path.responses}"
         active-schema-tab = "${this.defaultSchemaTab}" 
         render-style="${this.renderStyle}" 
@@ -155,10 +158,12 @@ function endpointBodyTemplate(path) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly}"
+        schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+        schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = 
-        "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp"
+        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
+        textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
+        schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
       > </api-response>
     </div>
   </div>`;
@@ -199,7 +204,7 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 }
                 return true;
                 }).map((path) => html`
-                <section id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
+                <section part="section-endpoint" id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
                   ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
                   ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
                 </section>`)

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

@@ -37,81 +37,86 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
   return html`
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
-    ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
-    ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
-    ${html`
-      ${path.xBadges && path.xBadges?.length > 0
-        ? html`
-          <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
-            ${path.xBadges.map((v) => (
-                html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
-              ))
-            }
-          </div>
+      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
+      ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
+      ${html`
+        ${path.xBadges && path.xBadges?.length > 0
+          ? html`
+            <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
+              ${path.xBadges.map((v) => (
+                  html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                ))
+              }
+            </div>
+            `
+          : ''
+        }
+        <h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
+        ${path.isWebhook
+          ? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
+          : html`
+            <div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
+              <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
+              <span part="label-operation-path">${path.path}</span>
+            </div>
           `
-        : ''
+        }
+        <slot name="${path.elementId}"></slot>`
       }
-      <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
-      ${path.isWebhook
-        ? html`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
-        : html`
-          <div class='mono-font part="section-operation-url" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
-            <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
-            <span part="label-operation-path">${path.path}</span>
-          </div>
-        `
-      }
-      <slot name="${path.elementId}"></slot>`
-    }
-    ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-    ${pathSecurityTemplate.call(this, path.security)}
-    ${codeSampleTabPanel}
-    <div class='expanded-req-resp-container'>
-      <api-request
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        method = "${path.method}"
-        path = "${path.path}"
-        .security = "${path.security}"
-        .parameters = "${path.parameters}"
-        .request_body = "${path.requestBody}"
-        .api_keys = "${nonEmptyApiKeys}"
-        .servers = "${path.servers}"
-        server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
-        fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-        allow-try = "${this.allowTry}"
-        accept = "${accept}"
-        render-style="${this.renderStyle}" 
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-read-only = "${this.schemaHideReadOnly}"
-        fetch-credentials = "${this.fetchCredentials}"
-        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"
-      > </api-request>
+      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${pathSecurityTemplate.call(this, path.security)}
+      ${codeSampleTabPanel}
+      <div class='expanded-req-resp-container'>
+        <api-request
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          webhook = "${path.isWebhook}"
+          method = "${path.method}"
+          path = "${path.path}"
+          .security = "${path.security}"
+          .parameters = "${path.parameters}"
+          .request_body = "${path.requestBody}"
+          .api_keys = "${nonEmptyApiKeys}"
+          .servers = "${path.servers}"
+          server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
+          fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
+          allow-try = "${this.allowTry}"
+          accept = "${accept}"
+          render-style="${this.renderStyle}" 
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+          fetch-credentials = "${this.fetchCredentials}"
+          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-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-request>
 
-      ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
+        ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
 
-      <api-response
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        .responses = "${path.responses}"
-        render-style = "${this.renderStyle}"
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly}"
-        selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
-      > </api-response>
+        <api-response
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          webhook = "${path.isWebhook}"
+          .responses = "${path.responses}"
+          render-style = "${this.renderStyle}"
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
+          exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
+          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-response>
+      </div>
     </div>
-  </div>
   `;
 }
 
@@ -120,7 +125,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="label-tag-title">${tag.name}</div>
+      <div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
       <slot name="${tag.elementId}"></slot>
       <div class="regular-font-size">
       ${

package/src/templates/header-template.js

@@ -4,7 +4,7 @@ import logoTemplate from '~/templates/logo-template';
 /* eslint-disable indent */
 export default function headerTemplate() {
   return html`
-  <header class="row header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
+  <header class="row main-header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
     <div class="only-large-screen-flex" style="align-items: center;">
       <slot name="logo" class="logo" part="section-logo">
         ${logoTemplate('height:36px;width:36px;margin-left:5px')}

package/src/templates/json-schema-viewer-template.js

@@ -154,7 +154,7 @@ export default function jsonSchemaViewerTemplate(isMini = false) {
     <!-- Header -->
     ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}
     
-    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection}>
 
       <!-- Side Nav -->
       ${jsonSchemaNavTemplate.call(this)}

package/src/templates/main-body-template.js

@@ -73,7 +73,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     <!-- Advanced Search -->
     ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
 
-    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection} >
       <!-- Side Nav -->
       ${((this.renderStyle === 'read' || this.renderStyle === 'focused')
           && this.showSideNav === 'true'

package/src/templates/navbar-template.js

@@ -50,7 +50,7 @@ export default function navbarTemplate() {
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`
-        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
+        <div style="display:flex; flex-direction:row; justify-content:center; align-items:stretch; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}" part="section-navbar-search">
           ${this.allowSearch === 'false'
             ? ''
             : html`
@@ -67,7 +67,9 @@ export default function navbarTemplate() {
               </div>  
               ${this.matchPaths
                 ? html`
-                  <div @click = '${this.onClearSearch}' style='margin-left:5px; cursor:pointer; align-self:center; color:var(--nav-text-color)' class='small-font-size primary-text bold-text'> CLEAR </div>`
+                  <button @click = '${this.onClearSearch}' class="m-btn thin-border" style="margin-left:5px; color:var(--nav-text-color); width:75px; padding:6px 8px;" part="btn btn-outline btn-clear-filter">
+                    CLEAR
+                  </button>`
                 : ''
               }
             `
@@ -75,8 +77,8 @@ export default function navbarTemplate() {
           ${this.allowAdvancedSearch === 'false' || this.matchPaths
             ? ''
             : html`
-              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
-                Search
+              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px; padding:6px 8px; width:75px" @click="${this.onShowSearchModalClicked}">
+                SEARCH
               </button>
             `
           }
@@ -89,7 +91,12 @@ export default function navbarTemplate() {
         : html`
           ${(this.infoDescriptionHeadingsInNavBar === 'true')
             ? html`
-              ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' > Overview </div>` : ''}
+              ${this.resolvedSpec.infoDescriptionHeaders.length > 0
+                ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+                    ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
+                  </div>`
+                : ''
+              }
               <div class="overview-headers">
                 ${this.resolvedSpec.infoDescriptionHeaders.map((header) => html`
                   <div 
@@ -104,7 +111,9 @@ export default function navbarTemplate() {
               </div>
               ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<hr style='border-top: 1px solid var(--nav-hover-bg-color); border-width:1px 0 0 0; margin: 15px 0 0 0'/>` : ''}
             `
-            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> Overview </div>`
+            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+            ${this.resolvedSpec.info?.title?.trim() || 'Overview'} 
+              </div>`
           }
         `
       }
@@ -197,10 +206,14 @@ export default function navbarTemplate() {
                   this.scrollToEventTarget(e, false);
                 }}'
               >
-                <span style = "${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                <span style = "display:flex; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                  ${html`<span class="nav-method ${this.showMethodInNavBar} ${p.method}">
+                      ${this.showMethodInNavBar === 'as-colored-block' ? p.method.substring(0, 3).toUpperCase() : p.method.toUpperCase()}
+                    </span>`
+                  }
                   ${p.isWebhook ? html`<span style="font-weight:bold; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)">WEBHOOK</span>` : ''}
                   ${this.usePathInNavBar === 'true'
-                    ? html`<span class='mono-font'>${p.method.toUpperCase()} ${p.path}</span>`
+                    ? html`<span class='mono-font'>${p.path}</span>`
                     : p.summary || p.shortSummary
                   }
                 </span>

package/src/templates/overview-template.js

@@ -16,7 +16,7 @@ export default function overviewTemplate() {
       class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
       ${this.resolvedSpec?.info
         ? html`
-          <div id="api-title" part="label-overview-title" style="font-size:32px">
+          <div id="api-title" part="section-overview-title" style="font-size:32px">
             ${this.resolvedSpec.info.title}
             ${!this.resolvedSpec.info.version ? '' : html`
               <span style = 'font-size:var(--font-size-small);font-weight:bold'>

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

@@ -252,7 +252,7 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 
 /* eslint-disable indent */
 
-function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = []) {
+function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header') {
   let { authorizationUrl, tokenUrl, refreshUrl } = authFlow;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
@@ -337,8 +337,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                 ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
                   ? html`
                     <select style="margin-right:5px;" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
-                      <option value = 'header' selected> Authorization Header </option>
-                      <option value = 'request-body'> Request Body </option>
+                      <option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>
+                      <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>
                     </select>`
                   : ''
                 }`
@@ -462,7 +462,7 @@ export default function securitySchemeTemplate() {
               ? html`
                 <tr>
                   <td style="border:none; padding-left:48px">
-                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f], v['x-default-scopes']))}
+                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f], v['x-default-scopes'], v['x-receive-token-in']))}
                   </td>
                 </tr>
                 `
@@ -483,21 +483,28 @@ export function pathSecurityTemplate(pathSecurity) {
     pathSecurity.forEach((pSecurity) => {
       const andSecurityKeys1 = [];
       const andKeyTypes = [];
-      Object.keys(pSecurity).forEach((pathSecurityKey) => {
-        let pathScopes = '';
-        const s = this.resolvedSpec.securitySchemes.find((ss) => ss.securitySchemeId === pathSecurityKey);
-        if (pSecurity[pathSecurityKey] && Array.isArray(pSecurity[pathSecurityKey])) {
-          pathScopes = pSecurity[pathSecurityKey].join(', ');
-        }
-        if (s) {
-          andKeyTypes.push(s.typeDisplay);
-          andSecurityKeys1.push({ ...s, ...({ scopes: pathScopes }) });
-        }
-      });
-      orSecurityKeys1.push({
-        securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
-        securityDefs: andSecurityKeys1,
-      });
+      if (Object.keys(pSecurity).length === 0) {
+        orSecurityKeys1.push({
+          securityTypes: 'None',
+          securityDefs: [],
+        });
+      } else {
+        Object.keys(pSecurity).forEach((pathSecurityKey) => {
+          let pathScopes = '';
+          const s = this.resolvedSpec.securitySchemes.find((ss) => ss.securitySchemeId === pathSecurityKey);
+          if (pSecurity[pathSecurityKey] && Array.isArray(pSecurity[pathSecurityKey])) {
+            pathScopes = pSecurity[pathSecurityKey].join(', ');
+          }
+          if (s) {
+            andKeyTypes.push(s.typeDisplay);
+            andSecurityKeys1.push({ ...s, ...({ scopes: pathScopes }) });
+          }
+        });
+        orSecurityKeys1.push({
+          securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
+          securityDefs: andSecurityKeys1,
+        });
+      }
     });
     return html`<div style="position:absolute; top:3px; right:2px; font-size:var(--font-size-small); line-height: 1.5;">
       <div style="position:relative; display:flex; min-width:350px; max-width:700px; justify-content: flex-end;">
@@ -513,7 +520,10 @@ export function pathSecurityTemplate(pathSecurity) {
               ${i !== 0 ? html`<div style="padding:3px 4px;"> OR </div>` : ''}
               <div class="tooltip">
                 <div style = "padding:2px 4px; white-space:nowrap; text-overflow:ellipsis;max-width:150px; overflow:hidden;">
-                  <a part="anchor anchor-operation-security" href="#auth"> ${orSecurityItem1.securityTypes} </a>
+                  ${this.updateRoute === 'true' && this.allowAuthentication === 'true'
+                    ? html`<a part="anchor anchor-operation-security" href="#auth"> ${orSecurityItem1.securityTypes} </a>`
+                    : html`${orSecurityItem1.securityTypes}`
+                  }
                 </div>
                 <div class="tooltip-text" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
                   ${orSecurityItem1.securityDefs.length > 1 ? html`<div>Requires <b>all</b> of the following </div>` : ''}

package/src/templates/server-template.js

@@ -35,7 +35,7 @@ function serverVarsTemplate() {
   // const selectedServerObj = this.resolvedSpec.servers.find((v) => (v.url === this.selectedServer));
   return this.selectedServer && this.selectedServer.variables
     ? html`
-    <div class="table-title"> SERVER VARIABLES</div>
+    <div class="table-title">SERVER VARIABLES</div>
     <table class='m-table'>
       ${Object.entries(this.selectedServer.variables).map((kv) => html`
         <tr>
@@ -86,7 +86,7 @@ export default function serverTemplate() {
   if (!this.resolvedSpec || this.resolvedSpec.specLoadError) { return ''; }
   return html`
   <section id = 'servers' part="section-servers" style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;" class='regular-font observe-me ${'read focused'.includes(this.renderStyle) ? 'section-gap--read-mode' : 'section-gap'}'>
-    <div class = 'sub-title'>API SERVER</div>
+    <div part = "section-servers-title" class = "sub-title">API SERVER</div>
     <div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
       ${!this.resolvedSpec.servers || this.resolvedSpec.servers?.length === 0
         ? ''

package/src/utils/common-utils.js

@@ -124,6 +124,7 @@ export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
   return pathsMatched;
 }
 
+/*
 export function prettyXml(sourceXmlString) {
   const xmlDoc = new DOMParser().parseFromString(sourceXmlString, 'text/xml');
   const xsltDoc = new DOMParser().parseFromString([
@@ -144,10 +145,6 @@ export function prettyXml(sourceXmlString) {
   const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
   return new XMLSerializer().serializeToString(resultDoc);
 }
-/*
-export function hasValidPathInUrlHash(tags) {
-  return tags.find((tag) => tag.paths.find((path) => window.location.hash.substring(1) === path.elementId));
-}
 */
 
 export function downloadResource(url, fileName) {