rapidoc 9.3.3 → 9.3.5

package/src/templates/navbar-template.js

@@ -4,70 +4,87 @@ import { pathIsInSearch } from '~/utils/common-utils';
 
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
   const tagAndPathEl = navLinkEl?.closest('.nav-bar-tag-and-paths');
+  const pathsUnderTagEl = tagAndPathEl?.querySelector('.nav-bar-paths-under-tag');
   if (tagAndPathEl) {
     const isExpanded = tagAndPathEl.classList.contains('expanded');
     if (isExpanded && (action === 'toggle' || action === 'collapse')) {
+      pathsUnderTagEl.style.maxHeight = 0;
       tagAndPathEl.classList.replace('expanded', 'collapsed');
     } else if (!isExpanded && (action === 'toggle' || action === 'expand')) {
       tagAndPathEl.classList.replace('collapsed', 'expanded');
+      pathsUnderTagEl.style.maxHeight = `${pathsUnderTagEl.scrollHeight}px`;
     }
   }
 }
 
-export function expandCollapseAll(navEl, action = 'expand-all') {
+export function expandCollapseAll(event, action = 'expand-all') {
+  if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
+    return;
+  }
+  const navEl = event.target.closest('.nav-scroll');
   const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
   if (action === 'expand-all') {
-    elList.map((el) => {
+    elList.forEach((el) => {
+      const navBarPathsUnderTagEl = el.querySelector('.nav-bar-paths-under-tag');
       el.classList.replace('collapsed', 'expanded');
+      navBarPathsUnderTagEl.style.maxHeight = `${navBarPathsUnderTagEl?.scrollHeight}px`;
     });
   } else {
-    elList.map((el) => {
+    elList.forEach((el) => {
       el.classList.replace('expanded', 'collapsed');
+      el.querySelector('.nav-bar-paths-under-tag').style.maxHeight = 0;
     });
   }
 }
 
-function onExpandCollapse(e) {
-  expandCollapseNavBarTag(e.target, 'toggle');
-}
-
-function onExpandCollapseAll(e, action = 'expand-all') {
-  expandCollapseAll(e.target.closest('.nav-scroll'), action);
+export function navBarClickAndEnterHandler(event) {
+  if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
+    return;
+  }
+  const navEl = event.target;
+  event.stopPropagation();
+  if (navEl.dataset?.action === 'navigate') {
+    this.scrollToEventTarget(event, false);
+  } else if (navEl.dataset?.action === 'expand-all' || (navEl.dataset?.action === 'collapse-all')) {
+    expandCollapseAll(event, navEl.dataset.action);
+  } else if (navEl.dataset?.action === 'expand-collapse-tag') {
+    expandCollapseNavBarTag(navEl, 'toggle');
+  }
 }
 
 /* eslint-disable indent */
 export default function navbarTemplate() {
   if (!this.resolvedSpec || this.resolvedSpec.specLoadError) {
     return html`
-      <nav class='nav-bar' part="section-navbar">
-        <slot name="nav-logo" class="logo"></slot>
+      <nav class='nav-bar' part='section-navbar'>
+        <slot name='nav-logo' class='logo'></slot>
       </nav>
     `;
   }
   return html`
-  <nav class='nav-bar ${this.renderStyle}' part="section-navbar">
-    <slot name="nav-logo" class="logo"></slot>
+  <nav class='nav-bar ${this.renderStyle}' part='section-navbar'>
+    <slot name='nav-logo' class='logo'></slot>
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`
-        <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">
+        <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`
-              <div style="display:flex; flex:1; line-height:22px;">
-                <input id="nav-bar-search" 
-                  part = "textbox textbox-nav-filter"
-                  style = "width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)" 
-                  type = "text"
-                  placeholder = "Filter" 
-                  @change = "${this.onSearchChange}"  
-                  spellcheck = "false" 
+              <div style = 'display:flex; flex:1; line-height:22px;'>
+                <input id = 'nav-bar-search' 
+                  part = 'textbox textbox-nav-filter'
+                  style = 'width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)'
+                  type = 'text'
+                  placeholder = 'Filter' 
+                  @change = '${this.onSearchChange}'
+                  spellcheck = 'false'
                 >
-                <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div>
+                <div style='margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;'>&#x21a9;</div>
               </div>  
               ${this.matchPaths
                 ? html`
-                  <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">
+                  <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>`
                 : ''
@@ -77,7 +94,7 @@ 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; padding:6px 8px; width:75px" @click="${this.onShowSearchModalClicked}">
+              <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>
             `
@@ -85,25 +102,25 @@ export default function navbarTemplate() {
         </div>
       `
     }
-    ${html`<nav class='nav-scroll' part="section-navbar-scroll">
+    ${html`<nav class='nav-scroll' tabindex='-1' part='section-navbar-scroll' @click='${(e) => navBarClickAndEnterHandler.call(this, e)}' @keyup='${(e) => navBarClickAndEnterHandler.call(this, e)}' >
       ${(this.showInfo === 'false' || !this.resolvedSpec.info)
         ? ''
         : 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)}'> 
+                ? html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-overview' data-content-id='overview' data-action='navigate' tabindex='0' part='section-navbar-item section-navbar-overview'> 
                     ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
                   </div>`
                 : ''
               }
-              <div class="overview-headers">
+              <div class='overview-headers'>
                 ${this.resolvedSpec.infoDescriptionHeaders.map((header) => html`
-                  <div 
-                    class='nav-bar-h${header.depth}' 
-                    id="link-overview--${new marked.Slugger().slug(header.text)}"  
+                  <div
+                    class='nav-bar-h${header.depth} ${this.navActiveItemMarker}' 
+                    id='link-overview--${new marked.Slugger().slug(header.text)}'
+                    data-action='navigate' 
                     data-content-id='overview--${new marked.Slugger().slug(header.text)}' 
-                    @click='${(e) => this.scrollToEventTarget(e, false)}'
                   >
                     ${header.text}
                   </div>`)
@@ -111,28 +128,36 @@ 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)}'> 
-            ${this.resolvedSpec.info?.title?.trim() || 'Overview'} 
-              </div>`
+            : html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-overview' data-action='navigate' data-content-id='overview' tabindex='0'> 
+              ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
+            </div>`
           }
         `
       }
     
       ${this.allowServerSelection === 'false'
         ? ''
-        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}'> API Servers </div>`
+        : html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-servers' data-action='navigate' data-content-id='servers' tabindex='0' part='section-navbar-item section-navbar-servers'> API Servers </div>`
       }
       ${(this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes)
         ? ''
-        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}'> Authentication </div>`
+        : html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-auth' data-action='navigate' data-content-id='auth' tabindex='0' part='section-navbar-item section-navbar-auth'> Authentication </div>`
       }
 
-      <div id='link-operations-top' class='nav-bar-section operations' data-content-id='operations-top' @click = '${(e) => this.scrollToEventTarget(e, false)}'>
-        <div style="font-size:16px; display:flex; margin-left:10px;">
+      <div id='link-operations-top' class='nav-bar-section operations' data-action='navigate' data-content-id='${this.renderStyle === 'focused' ? '' : 'operations-top'}' part='section-navbar-item section-navbar-operations-top'>
+        <div style='font-size:16px; display:flex; margin-left:10px;'>
           ${this.renderStyle === 'focused'
             ? html`
-              <div @click="${(e) => { onExpandCollapseAll.call(this, e, 'expand-all'); }}" title="Expand all" style="transform: rotate(90deg); cursor:pointer; margin-right:10px;">▸</div>
-              <div @click="${(e) => { onExpandCollapseAll.call(this, e, 'collapse-all'); }}" title="Collapse all" style="transform: rotate(270deg); cursor:pointer;">▸</div>`
+              <div class='nav-bar-expand-all'
+                data-action='expand-all'
+                tabindex='0' 
+                title='Expand all'
+              >▸</div>
+              <div class='nav-bar-collapse-all'
+                data-action='collapse-all'
+                tabindex='0' 
+                title='Collapse all'
+              >▸</div>`
             : ''
           }  
         </div>
@@ -143,30 +168,21 @@ export default function navbarTemplate() {
       ${this.resolvedSpec.tags
         .filter((tag) => tag.paths.filter((path) => pathIsInSearch(this.matchPaths, path, this.matchType)).length)
         .map((tag) => html`
-          <div class='nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}'>
+          <div class='nav-bar-tag-and-paths ${(this.renderStyle === 'read' ? 'expanded' : (tag.expanded ? 'expanded' : 'collapsed'))}' >
             ${tag.name === 'General ⦂'
-              ? html`<hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.3; margin:-1px 0 0 0;"/>`
+              ? html`<hr style='border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.3; margin:-1px 0 0 0;'/>`
               : html`
                 <div 
-                  class='nav-bar-tag' 
-                  id="link-${tag.elementId}" 
-                  data-content-id='${tag.elementId}'
+                  class='nav-bar-tag ${this.navActiveItemMarker}'
+                  part='section-navbar-item section-navbar-tag'
+                  id='link-${tag.elementId}'
+                  data-action='${(this.renderStyle === 'read' ? 'navigate' : this.onNavTagClick === 'show-description') ? 'navigate' : 'expand-collapse-tag'}'
+                  data-content-id='${(this.renderStyle === 'read' ? `${tag.elementId}` : this.onNavTagClick === 'show-description') ? `${tag.elementId}` : ''}'
                   data-first-path-id='${tag.firstPathId}'
-                  @click='${(e) => {
-                    if (this.renderStyle === 'focused' && this.onNavTagClick === 'expand-collapse') {
-                      onExpandCollapse.call(this, e);
-                    } else {
-                      this.scrollToEventTarget(e, false);
-                    }
-                  }}'
+                  tabindex='0'
                 >
-                  <div>${tag.name}</div>
-                  <div class="nav-bar-tag-icon" @click="${(e) => {
-                    if (this.renderStyle === 'focused' && this.onNavTagClick === 'show-description') {
-                      onExpandCollapse.call(this, e);
-                    }
-                  }}">
-                  </div>
+                  <div style="pointer-events:none;">${tag.displayName}</div>
+                  <div class='nav-bar-tag-icon' tabindex='0' data-action='expand-collapse-tag'></div>
                 </div>
               `
             }
@@ -177,19 +193,19 @@ export default function navbarTemplate() {
                   : html`
                     <div class='tag-headers'>
                       ${tag.headers.map((header) => html`
-                      <div 
-                        class='nav-bar-h${header.depth}' 
-                        id="link-${tag.elementId}--${new marked.Slugger().slug(header.text)}"  
-                        data-content-id='${tag.elementId}--${new marked.Slugger().slug(header.text)}' 
-                        @click='${(e) => this.scrollToEventTarget(e, false)}'
+                      <div
+                        class='nav-bar-h${header.depth} ${this.navActiveItemMarker}'
+                        part='section-navbar-item section-navbar-h${header.depth}'
+                        id='link-${tag.elementId}--${new marked.Slugger().slug(header.text)}'
+                        data-action='navigate'
+                        data-content-id='${tag.elementId}--${new marked.Slugger().slug(header.text)}'
+                        tabindex='0'
                       > ${header.text}</div>`)}
                     </div>`
                 }`
               : ''
             }
-
-            
-            <div class='nav-bar-paths-under-tag'>
+            <div class='nav-bar-paths-under-tag' style='max-height:${(tag.expanded || this.renderStyle === 'read') ? ((tag.paths?.length || 1) * 50) : 0}px;'>
               <!-- Paths in each tag (endpoints) -->
               ${tag.paths.filter((v) => {
                 if (this.matchPaths) {
@@ -198,22 +214,21 @@ export default function navbarTemplate() {
                 return true;
               }).map((p) => html`
               <div 
-                class='nav-bar-path
-                ${this.usePathInNavBar === 'true' ? 'small-font' : ''}'
+                class='nav-bar-path ${this.navActiveItemMarker} ${this.usePathInNavBar === 'true' ? 'small-font' : ''}'
+                part='section-navbar-item section-navbar-path'
+                data-action='navigate'
                 data-content-id='${p.elementId}'
                 id='link-${p.elementId}'
-                @click = '${(e) => {
-                  this.scrollToEventTarget(e, false);
-                }}'
+                tabindex='0'
               >
-                <span style = "display:flex; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}">
-                  ${html`<span class="nav-method ${this.showMethodInNavBar} ${p.method}">
+                <span style = 'display:flex; pointer-events: none; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}'>
+                  ${html`<span class='nav-method ${this.showMethodInNavBar} ${p.method}' style='pointer-events: none;'>
                       ${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>` : ''}
+                  ${p.isWebhook ? html`<span style='font-weight:bold; pointer-events: none; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)'>WEBHOOK</span>` : ''}
                   ${this.usePathInNavBar === 'true'
-                    ? html`<span class='mono-font'>${p.path}</span>`
+                    ? html`<span style='pointer-events: none;' class='mono-font'>${p.path}</span>`
                     : p.summary || p.shortSummary
                   }
                 </span>
@@ -232,15 +247,17 @@ export default function navbarTemplate() {
           </div>
           ${this.resolvedSpec.components.map((component) => (component.subComponents.length
             ? html`
-              <div class='nav-bar-tag' 
+              <div class='nav-bar-tag'
+                part='section-navbar-item section-navbar-tag'
+                data-action='navigate' 
                 data-content-id='cmp--${component.name.toLowerCase()}' 
-                id='link-cmp--${component.name.toLowerCase()}' 
-                @click='${(e) => this.scrollToEventTarget(e, false)}'>
+                id='link-cmp--${component.name.toLowerCase()}'
+              >
                 ${component.name}
               </div>
               ${component.subComponents.filter((p) => p.expanded !== false).map((p) => html`
-                <div class='nav-bar-path' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}' @click='${(e) => this.scrollToEventTarget(e, false)}'>
-                  <span> ${p.name} </span>
+                <div class='nav-bar-path' data-action='navigate' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}'>
+                  <span style = 'pointer-events: none;'> ${p.name} </span>
                 </div>`)
               }`
             : ''))

package/src/templates/overview-template.js

@@ -50,7 +50,7 @@ export default function overviewTemplate() {
             ${this.specUrl && this.allowSpecFileDownload === 'true'
               ? html`
                 <div style="display:flex; margin:12px 0; gap:8px; justify-content: start;">
-                  <button class="m-btn thin-border" style="width:170px" part="btn btn-outline" @click='${(e) => { downloadResource(this.specUrl, 'openapi-spec', e); }}'>Download OpenAPI spec</button>
+                  <button class="m-btn thin-border" style="min-width:170px" part="btn btn-outline" @click='${(e) => { downloadResource(this.specUrl, 'openapi-spec', e); }}'>Download OpenAPI spec</button>
                   ${this.specUrl?.trim().toLowerCase().endsWith('json')
                     ? html`<button class="m-btn thin-border" style="width:200px" part="btn btn-outline" @click='${(e) => { viewResource(this.specUrl, e); }}'>View OpenAPI spec (New Tab)</button>`
                     : ''

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

@@ -16,7 +16,7 @@ export function applyApiKey(securitySchemeId, username = '', password = '', prov
   let finalApiKeyValue = '';
   if (securityObj.scheme?.toLowerCase() === 'basic') {
     if (username) {
-      finalApiKeyValue = `Basic ${btoa(`${username}:${password}`)}`;
+      finalApiKeyValue = `Basic ${Buffer.from(`${username}:${password}`, 'utf8').toString('base64')}`;
     }
   } else if (providedApikeyVal) {
     securityObj.value = providedApikeyVal;
@@ -92,6 +92,10 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
   const urlFormParams = new URLSearchParams();
   const headers = new Headers();
   urlFormParams.append('grant_type', grantType);
+  if (grantType === 'authorization_code') {
+    urlFormParams.append('client_id', clientId);
+    urlFormParams.append('client_secret', clientSecret);
+  }
   if (grantType !== 'client_credentials' && grantType !== 'password') {
     urlFormParams.append('redirect_uri', redirectUrl);
   }
@@ -100,8 +104,8 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
     urlFormParams.append('code_verifier', codeVerifier); // for PKCE
   }
   if (sendClientSecretIn === 'header') {
-    headers.set('Authorization', `Basic ${btoa(`${clientId}:${clientSecret}`)}`);
-  } else {
+    headers.set('Authorization', `Basic ${Buffer.from(`${clientId}:${clientSecret}`, 'utf8').toString('base64')}`);
+  } else if (grantType !== 'authorization_code') {
     urlFormParams.append('client_id', clientId);
     urlFormParams.append('client_secret', clientSecret);
   }
@@ -185,8 +189,8 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
   const sendClientSecretIn = authFlowDivEl.querySelector('.oauth-send-client-secret-in') ? authFlowDivEl.querySelector('.oauth-send-client-secret-in').value.trim() : 'header';
   const checkedScopeEls = [...authFlowDivEl.querySelectorAll('.scope-checkbox:checked')];
   const pkceCheckboxEl = authFlowDivEl.querySelector(`#${securitySchemeId}-pkce`);
-  const state = (`${Math.random().toString(36)}random`).slice(2, 9);
-  const nonce = (`${Math.random().toString(36)}random`).slice(2, 9);
+  const state = (`${Math.random().toString(36).slice(2, 9)}random${Math.random().toString(36).slice(2, 9)}`);
+  const nonce = (`${Math.random().toString(36).slice(2, 9)}random${Math.random().toString(36).slice(2, 9)}`);
   // const codeChallenge = await generateCodeChallenge(codeVerifier);
   const redirectUrlObj = new URL(`${window.location.origin}${window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'))}/${this.oauthReceiver}`);
   let grantType = '';
@@ -252,17 +256,22 @@ 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);
+  // Calculcate base URL
+  const url = new URL(this.selectedServer.computedUrl);
+  const baseUrl = url.origin;
+
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
-    refreshUrl = `${this.selectedServer.computedUrl}/${refreshUrl.replace(/^\//, '')}`;
+    refreshUrl = `${baseUrl}/${refreshUrl.replace(/^\//, '')}`;
   }
   if (tokenUrl && !isUrlAbsolute(tokenUrl)) {
-    tokenUrl = `${this.selectedServer.computedUrl}/${tokenUrl.replace(/^\//, '')}`;
+    tokenUrl = `${baseUrl}/${tokenUrl.replace(/^\//, '')}`;
   }
   if (authorizationUrl && !isUrlAbsolute(authorizationUrl)) {
-    authorizationUrl = `${this.selectedServer.computedUrl}/${authorizationUrl.replace(/^\//, '')}`;
+    authorizationUrl = `${baseUrl}/${authorizationUrl.replace(/^\//, '')}`;
   }
   let flowNameDisplay;
   if (flowName === 'authorizationCode') {
@@ -322,7 +331,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
             ${flowName === 'authorizationCode'
               ? html`
                 <div style="margin: 16px 0 4px">
-                  <input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked>
+                  <input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked ?disabled=${pkceOnly}>
                   <label for="${securitySchemeId}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
                    Send Proof Key for Code Exchange (PKCE)
                   </label>
@@ -333,15 +342,17 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
             <input type="text" part="textbox textbox-auth-client-id" value = "${clientId || ''}" placeholder="client-id" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} oauth-client-id">
             ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
               ? html`
-                <input type="password" part="textbox textbox-auth-client-secret" value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} oauth-client-secret" style = "margin:0 5px;">
-                ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
-                  ? html`
-                    <select style="margin-right:5px;" 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>
-                    </select>`
-                  : ''
-                }`
+                <input
+                  type="password" part="textbox textbox-auth-client-secret"
+                  value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false"
+                  class="oauth2 ${flowName} ${securitySchemeId}
+                  oauth-client-secret"
+                  style = "margin:0 5px;${pkceOnly ? 'display:none;' : ''}"
+                >
+                <select style="margin-right:5px;${pkceOnly ? 'display:none;' : ''}" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
+                   ${(!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>`
               : ''
             }
             ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' || flowName === 'password'
@@ -395,7 +406,7 @@ export default function securitySchemeTemplate() {
     </div>
     ${this.resolvedSpec.securitySchemes && this.resolvedSpec.securitySchemes.length > 0
       ? html`
-        <table id="auth-table" class='m-table padded-12' style="width:100%;">
+        <table role="presentation" id="auth-table" class='m-table padded-12' style="width:100%;">
           ${this.resolvedSpec.securitySchemes.map((v) => html`
             <tr id="security-scheme-${v.securitySchemeId}" class="${v.type.toLowerCase()}">
               <td style="max-width:500px; overflow-wrap: break-word;">
@@ -462,7 +473,18 @@ 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'], v['x-receive-token-in']))}
+                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate
+                      .call(
+                        this,
+                        f,
+                        (v.flows[f]['x-client-id'] || v['x-client-id'] || ''),
+                        (v.flows[f]['x-client-secret'] || v['x-client-secret'] || ''),
+                        v.securitySchemeId,
+                        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>
                 `
@@ -480,6 +502,13 @@ export default function securitySchemeTemplate() {
 export function pathSecurityTemplate(pathSecurity) {
   if (this.resolvedSpec.securitySchemes && pathSecurity) {
     const orSecurityKeys1 = [];
+    if (Array.isArray(pathSecurity)) {
+      if (pathSecurity.length === 0) {
+        return '';
+      }
+    } else {
+      return '';
+    }
     pathSecurity.forEach((pSecurity) => {
       const andSecurityKeys1 = [];
       const andKeyTypes = [];
@@ -508,13 +537,8 @@ export function pathSecurityTemplate(pathSecurity) {
     });
     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;">
-        <svg width="16" height="24">
-          <g>
-            <path style="fill: var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z" />
-          </g>
-        </svg>
+        <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" style="stroke:var(--fg3)"> <rect x="5" y="11" width="14" height="10" rx="2" /> <circle cx="12" cy="16" r="1" /> <path d="M8 11v-4a4 4 0 0 1 8 0v4" /></svg>
           ${orSecurityKeys1.map((orSecurityItem1, i) => html`
-
           ${orSecurityItem1.securityTypes
             ? html`
               ${i !== 0 ? html`<div style="padding:3px 4px;"> OR </div>` : ''}

package/src/templates/server-template.js

@@ -36,7 +36,7 @@ function serverVarsTemplate() {
   return this.selectedServer && this.selectedServer.variables
     ? html`
     <div class="table-title">SERVER VARIABLES</div>
-    <table class='m-table'>
+    <table class='m-table' role='presentation'>
       ${Object.entries(this.selectedServer.variables).map((kv) => html`
         <tr>
           <td style="vertical-align: middle;" >${kv[0]}</td>

package/src/utils/common-utils.js

@@ -19,7 +19,7 @@ export function sleep(ms) {
 }
 
 export function copyToClipboard(data, e) {
-  const btnEl = e.currentTarget;
+  const btnEl = e.target;
   const textArea = document.createElement('textarea');
   textArea.value = data;
   textArea.style.position = 'fixed'; // avoid scrolling to bottom
@@ -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');