rapidoc 9.3.6 → 9.3.8

package/src/styles/font-styles.js

@@ -1,14 +1,14 @@
 import { css } from 'lit';
 
 export default css`
-  .hover-bg:hover{
+  .hover-bg:hover {
     background: var(--bg3);
   }
   ::selection {
     background: var(--selection-bg);
     color: var(--selection-fg);
   }
-  .regular-font{ 
+  .regular-font { 
     font-family:var(--font-regular); 
   }
   .mono-font { 
@@ -18,7 +18,7 @@ export default css`
     font-size: calc(var(--font-size-small) + 18px);
     font-weight: normal 
   }
-  .sub-title{ font-size: 20px;}
+  .sub-title{ font-size: 20px; }
   .req-res-title {
     font-family: var(--font-regular);
     font-size: calc(var(--font-size-small) + 4px);
@@ -33,11 +33,11 @@ export default css`
   .regular-font-size { font-size: var(--font-size-regular); }
   .small-font-size { font-size: var(--font-size-small); }
   .upper { text-transform: uppercase; }
-  .primary-text{ color: var(--primary-color); }
+  .primary-text { color: var(--primary-color); }
   .bold-text { font-weight:bold; }
   .gray-text { color: var(--light-fg); }
-  .red-text {color: var(--red)}
-  .blue-text {color: var(--blue)}
+  .red-text { color: var(--red) }
+  .blue-text { color: var(--blue) }
   .multiline {
     overflow: scroll;
     max-height: var(--resp-area-height, 400px);
@@ -53,14 +53,14 @@ export default css`
     color: var(--yellow); 
   }
 
-  h1{ font-family:var(--font-regular); font-size:28px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h2{ font-family:var(--font-regular); font-size:24px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h3{ font-family:var(--font-regular); font-size:18px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h4{ font-family:var(--font-regular); font-size:16px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h5{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h6{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h1 { font-family:var(--font-regular); font-size:28px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h2 { font-family:var(--font-regular); font-size:24px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h3 { font-family:var(--font-regular); font-size:18px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h4 { font-family:var(--font-regular); font-size:16px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h5 { font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h6 { font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
 
-  h1,h2,h3,h4,h5,h5{
+  h1,h2,h3,h4,h5,h5 {
     margin-block-end: 0.2em;
   }
   p { margin-block-start: 0.5em; }

package/src/styles/input-styles.js

@@ -15,10 +15,10 @@ export default css`
   white-space: nowrap;
   border: 2px solid var(--primary-color);
   background-color:transparent;
-  transition: background-color 0.2s;
   user-select: none;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition-duration: 0.75s;
 }
 .m-btn.primary {
   background-color: var(--primary-color);
@@ -37,14 +37,19 @@ export default css`
 .m-btn.nav:hover { 
   background-color: var(--nav-accent-color);
 }
-.m-btn:disabled{ 
+.m-btn:disabled { 
   background-color: var(--bg3);
   color: var(--fg3);
   border-color: var(--fg3);
   cursor: not-allowed;
   opacity: 0.4;
 }
-.toolbar-btn{
+.m-btn:active {
+  filter: brightness(75%);
+  transform: scale(0.95);
+  transition:scale 0s;
+}
+.toolbar-btn {
   cursor: pointer;
   padding: 4px;
   margin:0 2px;

package/src/styles/nav-styles.js

@@ -29,7 +29,7 @@ export default css`
   flex-wrap:nowrap;
   word-break:break-word;
 }
-::slotted([slot=nav-logo]){
+::slotted([slot=nav-logo]) {
   padding:16px 16px 0 16px;
 }
 .nav-scroll {

package/src/styles/schema-styles.js

@@ -3,6 +3,9 @@ import { css } from 'lit';
 export default css`
 
 *, *:before, *:after { box-sizing: border-box; }
+:host {
+  container-type: inline-size;
+}
 
 .tr {
   display: flex;
@@ -81,13 +84,13 @@ export default css`
   margin-left: 2px;
 }
 
-.stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host {color:var(--green);}
-.inte, .numb, .number, .int6, .int3, .floa, .doub, .deci .blue {color:var(--blue);}
-.null {color:var(--red);}
-.bool, .boolean{color:var(--orange)}
-.enum {color:var(--purple)}
-.cons {color:var(--purple)}
-.recu {color:var(--brown)}
+.stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host { color:var(--green); }
+.inte, .numb, .number, .int6, .int3, .floa, .doub, .deci .blue { color:var(--blue); }
+.null { color:var(--red); }
+.bool, .boolean { color:var(--orange) }
+.enum { color:var(--purple) }
+.cons { color:var(--purple) }
+.recu { color:var(--brown) }
 .toolbar {
   display:flex;
   width:100%;
@@ -107,11 +110,11 @@ export default css`
 }
 .toolbar-item:first-of-type { margin:0 2px 0 0;}
 
-@media only screen and (min-width: 500px) {
+@container (min-width: 500px) {
   .key-descr {
     display: block;
   }
-  .expanded-descr .key-descr{
+  .expanded-descr .key-descr {
     display: block;
   }
 }

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

@@ -13,6 +13,7 @@ export default function searchByPropertiesModalTemplate() {
     >
       <span class="advanced-search-options">
         <input
+          id="input-advanced-search-dialog"
           style="width:100%; padding-right:20px;"
           type="text"
           part="textbox textbox-search-dialog"
@@ -52,7 +53,7 @@ export default function searchByPropertiesModalTemplate() {
         tabindex = '0'
         @click="${
           (e) => {
-            this.matchPaths = ''; // clear quick filter if applied
+            this.searchVal = ''; // clear quick filter if applied
             this.showAdvancedSearchDialog = false; // Hide Search Dialog
             this.requestUpdate();
             this.scrollToEventTarget(e, true);

package/src/templates/callback-template.js

@@ -40,6 +40,7 @@ export default function callbackTemplate(callbacks) {
                       schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
                       fetch-credentials = "${this.fetchCredentials}"
                       exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                        tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
                         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>
@@ -58,7 +59,8 @@ export default function callbackTemplate(callbacks) {
                       schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : 'true'}"
                       schema-hide-write-only = "false"
                       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"
+                        tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
+                        schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
                     > </api-response>
                   </div>
                 </div>  

package/src/templates/code-samples-template.js

@@ -7,7 +7,7 @@ import { copyToClipboard } from '~/utils/common-utils';
 export default function codeSamplesTemplate(xCodeSamples) {
   return html`
   <section class="table-title" style="margin-top:24px;">CODE SAMPLES</div>
-  <div class="tab-panel col"
+  <div part="tab-panel" class="tab-panel col"
     @click="${
       (e) => {
         if (!e.target.classList.contains('tab-btn')) { return; }
@@ -19,8 +19,8 @@ export default function codeSamplesTemplate(xCodeSamples) {
         tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });
       }
     }">
-    <div class="tab-buttons row" style="width:100; overflow">
-      ${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
+    <div part="tab-btn-row" class="tab-buttons row" style="width:100; overflow">
+      ${xCodeSamples.map((v, i) => html`<button part="tab-btn" class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
     </div>
     ${xCodeSamples.map((v, i) => html`
       <div class="tab-content m-markdown" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>

package/src/templates/endpoint-template.js

@@ -6,7 +6,7 @@ import '~/components/api-response';
 import codeSamplesTemplate from '~/templates/code-samples-template';
 import callbackTemplate from '~/templates/callback-template';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
-import { pathIsInSearch, rapidocApiKey } from '~/utils/common-utils';
+import { getMatchedPaths, rapidocApiKey } from '~/utils/common-utils';
 
 function toggleExpand(path) {
   if (path.expanded) {
@@ -91,7 +91,7 @@ function endpointBodyTemplate(path) {
   <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" part="section-endpoint-body-title">${path.summary}<div>`
+        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}</div>`
         : path.shortSummary !== path.description
           ? html`<div class="title" part="section-endpoint-body-title">${path.shortSummary}</div>`
           : ''
@@ -100,7 +100,9 @@ function endpointBodyTemplate(path) {
         ? html`
           <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
             ${path.xBadges.map((v) => (
-                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>`
+                v.color === 'none'
+                  ? ''
+                  : 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>
@@ -138,7 +140,7 @@ function endpointBodyTemplate(path) {
           .request_body = "${path.requestBody}"
           .api_keys = "${nonEmptyApiKeys}"
           .servers = "${path.servers}" 
-          server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
+          server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer?.computedUrl}" 
           active-schema-tab = "${this.defaultSchemaTab}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
@@ -153,6 +155,7 @@ function endpointBodyTemplate(path) {
           schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           fetch-credentials = "${this.fetchCredentials}"
           exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
             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>
@@ -175,18 +178,20 @@ function endpointBodyTemplate(path) {
           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,
-          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+            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,
+            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
+            schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
         > </api-response>
       </div>
   </div>`;
 }
 
-export default function endpointTemplate(showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+export default function endpointTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) { return ''; }
   return html`
-    ${showExpandCollapse
-      ? html`
+    ${isMini
+      ? ''
+      : html`
         <div style="display:flex; justify-content:flex-end;"> 
           <span @click="${(e) => onExpandCollapseAll(e, 'expand-all')}" style="color:var(--primary-color); cursor:pointer;">
             Expand all
@@ -197,11 +202,25 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
           </span> 
           &nbsp; sections
         </div>`
-      : ''
     }
     ${this.resolvedSpec.tags.map((tag) => html`
-      ${showTags
-        ? html` 
+      ${isMini
+        ? html`
+          <div class='section-tag-body'>
+          ${tag.paths.filter((path) => {
+            if (this.searchVal) {
+              return getMatchedPaths(this.searchVal, path, tag.name);
+            }
+            return true;
+            }).map((path) => html`
+            <section 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>`)
+          }
+          </div>
+        `
+        : 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.displayName || tag.name}</div>
@@ -212,8 +231,8 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 ${unsafeHTML(marked(tag.description || ''))}
               </div>
               ${tag.paths.filter((v) => {
-                if (this.matchPaths) {
-                  return pathIsInSearch(this.matchPaths, v, this.matchType);
+                if (this.searchVal) {
+                  return getMatchedPaths(this.searchVal, v, tag.name);
                 }
                 return true;
                 }).map((path) => html`
@@ -223,20 +242,6 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 </section>`)
               }
             </div>
-          </div>`
-        : html`
-          <div class='section-tag-body'>
-          ${tag.paths.filter((v) => {
-            if (this.matchPaths) {
-              return pathIsInSearch(this.matchPaths, v, this.matchType);
-            }
-            return true;
-            }).map((path) => html`
-            <section 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>`)
-          }
           </div>
         `
       }

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

@@ -80,7 +80,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           ? 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>`
+                v.color === 'none'
+                  ? ''
+                  : 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>
@@ -126,7 +128,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           .request_body = "${path.requestBody}"
           .api_keys = "${nonEmptyApiKeys}"
           .servers = "${path.servers}"
-          server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
+          server-url = "${path.servers?.[0]?.url || this.selectedServer?.computedUrl}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
           show-curl-before-try = "${this.showCurlBeforeTry}"
@@ -141,6 +143,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           fetch-credentials = "${this.fetchCredentials}"
           exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
             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>
@@ -162,7 +165,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           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"
+            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
+            schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
         > </api-response>
       </div>
     </div>

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

@@ -5,7 +5,7 @@ import { marked } from 'marked';
 // Templates
 import overviewTemplate from '~/templates/overview-template';
 import headerTemplate from '~/templates/header-template';
-import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
+import { schemaInObjectNotation, generateExample, standardizeExample } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
 import SetTheme from '~/utils/theme';
@@ -49,7 +49,7 @@ function jsonSchemaBodyTemplate() {
     ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
     <div style="font-size:var(--font-size-regular);">
     ${this.resolvedSpec.schemaAndExamples.map((jSchemaBody) => {
-      const examplesObj = generateExample(jSchemaBody.schema, 'json', jSchemaBody.examples, jSchemaBody.example, true, false, 'json', true);
+      const examplesObj = generateExample(jSchemaBody.schema, 'json', standardizeExample(jSchemaBody.examples), standardizeExample(jSchemaBody.example), true, false, 'json', true);
       jSchemaBody.selectedExample = examplesObj[0]?.exampleId;
       return html`
         <section id='${jSchemaBody.elementId}' class='json-schema-and-example regular-font' style="display:flex; flex-direction: column; border:1px solid var(--border-color); margin-bottom:32px; border-top: 5px solid var(--border-color)">
@@ -99,7 +99,7 @@ function jsonSchemaBodyTemplate() {
 
 // Json Schema Root Template
 export default function jsonSchemaViewerTemplate(isMini = false) {
-// export default function jsonSchemaViewerTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+// export default function jsonSchemaViewerTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) {
     return '';
   }

package/src/templates/logo-template.js

@@ -4,7 +4,7 @@ import { html } from 'lit';
 export default function logoTemplate(style) {
 return html`
   <div style=${style}>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 0 511 512">
+    <svg viewBox="1 0 511 512">
       <path d="M351 411a202 202 0 01-350 0 203 203 0 01333-24 203 203 0 0117 24zm0 0" fill="#adc165"/>
       <path d="M334 387a202 202 0 01-216-69 202 202 0 01216 69zm78 32H85a8 8 0 01-8-8 8 8 0 018-8h327a8 8 0 017 8 8 8 0 01-7 8zm0 0" fill="#99aa52"/>
       <path d="M374 338l-5 30a202 202 0 01-248-248 203 203 0 01253 218zm0 0" fill="#ffc73b"/>

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

@@ -13,7 +13,7 @@ import advancedSearchTemplate from '~/templates/advance-search-template';
 import SetTheme from '~/utils/theme';
 import { isValidHexColor } from '~/utils/color-utils';
 
-export default function mainBodyTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+export default function mainBodyTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) {
     return '';
   }
@@ -34,25 +34,14 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
   };
   /* eslint-disable indent */
   if (this.resolvedSpec.specLoadError) {
-    if (isMini) {
-      return html`
-        ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-        <div style='display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
-      `;
-    }
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <!-- Header -->
-      ${headerTemplate.call(this)}
-      <main class='main-content regular-font' part='section-main-content'>
-        <slot></slot>
-        <div style='margin:24px; text-align: center;'>
-          <h1 style='color: var(--red)'> ${this.resolvedSpec.info.title} </h1>
-          <div style='font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
-        </div>
-      </main>  
+      <div id="spec-not-found" style='display:flex; align-items:center; justify-content: center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)'> 
+        ${this.resolvedSpec.info.description} 
+      </div>
     `;
   }
+
   if (this.resolvedSpec.isSpecLoading) {
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
@@ -104,7 +93,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
                       </div>  
                       ${this.renderStyle === 'read'
                         ? expandedEndpointTemplate.call(this)
-                        : endpointTemplate.call(this, showExpandCollapse, showTags, pathsExpanded)
+                        : endpointTemplate.call(this, isMini, pathsExpanded)
                       }
                     `
                   }

package/src/templates/navbar-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { marked } from 'marked';
-import { pathIsInSearch } from '~/utils/common-utils';
+import { getMatchedPaths } from '~/utils/common-utils';
 
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
   const tagAndPathEl = navLinkEl?.closest('.nav-bar-tag-and-paths');
@@ -82,7 +82,7 @@ export default function navbarTemplate() {
                 >
                 <div style='margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;'>&#x21a9;</div>
               </div>  
-              ${this.matchPaths
+              ${this.searchVal
                 ? 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'>
                     CLEAR
@@ -91,7 +91,7 @@ export default function navbarTemplate() {
               }
             `
           }
-          ${this.allowAdvancedSearch === 'false' || this.matchPaths
+          ${this.allowAdvancedSearch === 'false' || this.searchVal
             ? ''
             : html`
               <button class='m-btn primary' part='btn btn-fill btn-search' style='margin-left:5px; padding:6px 8px; width:75px' @click='${this.onShowSearchModalClicked}'>
@@ -166,7 +166,7 @@ export default function navbarTemplate() {
 
       <!-- TAGS AND PATHS-->
       ${this.resolvedSpec.tags
-        .filter((tag) => tag.paths.filter((path) => pathIsInSearch(this.matchPaths, path, this.matchType)).length)
+        .filter((tag) => tag.paths.filter((path) => getMatchedPaths(this.searchVal, path, tag.name)).length)
         .map((tag) => html`
           <div class='nav-bar-tag-and-paths ${(this.renderStyle === 'read' ? 'expanded' : (tag.expanded ? 'expanded' : 'collapsed'))}' >
             ${tag.name === 'General ⦂'
@@ -208,8 +208,8 @@ export default function navbarTemplate() {
             <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) {
-                  return pathIsInSearch(this.matchPaths, v, this.matchType);
+                if (this.searchVal) {
+                  return getMatchedPaths(this.searchVal, v, tag.name);
                 }
                 return true;
               }).map((p) => html`

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

@@ -134,7 +134,7 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
       }
       return false;
     }
-  } catch (err) {
+  } catch {
     if (respDisplayEl) {
       respDisplayEl.innerHTML = '<span style="color:var(--red)">Failed to get access token</span>';
     }
@@ -261,7 +261,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
   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 url = new URL(this.selectedServer?.computedUrl);
   const baseUrl = url.origin;
 
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
@@ -322,8 +322,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
           ${flowName === 'password'
             ? html`
               <div style="margin:5px 0">
-                <input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-user" part="textbox textbox-username">
-                <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password">
+                <input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-user" part="textbox textbox-username" id="input-${securitySchemeId}-${flowName}-api-key-user">
+                <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password" id="input-${securitySchemeId}-${flowName}-api-key-password">
               </div>`
             : ''
           }
@@ -343,6 +343,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
             ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
               ? html`
                 <input
+                  id="${securitySchemeId}-${flowName}-oauth-client-secret"
                   type="password" part="textbox textbox-auth-client-secret"
                   value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false"
                   class="oauth2 ${flowName} ${securitySchemeId}
@@ -407,7 +408,9 @@ export default function securitySchemeTemplate() {
     ${this.resolvedSpec.securitySchemes && this.resolvedSpec.securitySchemes.length > 0
       ? html`
         <table role="presentation" id="auth-table" class='m-table padded-12' style="width:100%;">
-          ${this.resolvedSpec.securitySchemes.map((v) => html`
+          ${this.resolvedSpec.securitySchemes
+          .filter((v) => v.type)
+          .map((v) => html`
             <tr id="security-scheme-${v.securitySchemeId}" class="${v.type.toLowerCase()}">
               <td style="max-width:500px; overflow-wrap: break-word;">
                 <div style="line-height:28px; margin-bottom:5px;">
@@ -428,7 +431,7 @@ export default function securitySchemeTemplate() {
                   : ''
                 }
 
-                ${(v.type.toLowerCase() === 'apikey') || (v.type.toLowerCase() === 'http' && v.scheme.toLowerCase() === 'bearer')
+                ${(v.type.toLowerCase() === 'apikey') || (v.type.toLowerCase() === 'http' && v.scheme?.toLowerCase() === 'bearer')
                   ? html`
                     <div style="margin-bottom:5px">
                       ${v.type.toLowerCase() === 'apikey'
@@ -439,7 +442,7 @@ export default function securitySchemeTemplate() {
                     <div style="max-height:28px;">
                       ${v.in !== 'cookie'
                         ? html`
-                          <input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false">
+                          <input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
                           <button class="m-btn thin-border" style = "margin-left:5px;"
                             part = "btn btn-outline"
                             @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
@@ -450,14 +453,14 @@ export default function securitySchemeTemplate() {
                     </div>`
                   : ''
                 }
-                ${v.type.toLowerCase() === 'http' && v.scheme.toLowerCase() === 'basic'
+                ${v.type.toLowerCase() === 'http' && v.scheme?.toLowerCase() === 'basic'
                   ? html`
                     <div style="margin-bottom:5px">
                       Send <code>Authorization</code> in <code>header</code> containing the word <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
                     </div>
                     <div>
-                      <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px">
-                      <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;">
+                      <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px" id = "input-${v.type}-${v.securitySchemeId}-api-key-user">
+                      <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;" id = "input-${v.type}-${v.securitySchemeId}-api-key-password">
                       <button class="m-btn thin-border"
                         @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
                         part = "btn btn-outline"
@@ -600,6 +603,7 @@ export function pathSecurityTemplate(pathSecurity) {
         `)
         }
       </div>
+      </div>
     `;
   }
   return '';

package/src/utils/common-utils.js

@@ -49,17 +49,13 @@ export async function wait(ms) {
   });
 }
 
-export function componentIsInSearch(searchVal, component) {
+export function getMatchedComponents(searchVal, component) {
   return component.name.toLowerCase().includes(searchVal.toLowerCase());
 }
 
-export function pathIsInSearch(searchVal, path, matchType = 'includes') {
-  if (matchType === 'includes') {
-    const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''}`.toLowerCase();
-    return stringToSearch.includes(searchVal.toLowerCase());
-  }
-  const regex = new RegExp(searchVal, 'i');
-  return regex.test(`${path.method} ${path.path}`);
+export function getMatchedPaths(searchVal, path, tagName = '') {
+  const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''} ${tagName}`.toLowerCase();
+  return stringToSearch.includes(searchVal.toLowerCase());
 }
 
 export function schemaKeys(schemaProps, result = new Set()) {
@@ -90,7 +86,7 @@ export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
         stringToSearch = path.path;
       }
       if (searchOptions.includes('search-api-descr')) {
-        stringToSearch = `${stringToSearch} ${path.summary || path.description || ''}`;
+        stringToSearch = `${stringToSearch} ${(path.summary || '') + (path.description || '')}`;
       }
       if (searchOptions.includes('search-api-params')) {
         stringToSearch = `${stringToSearch} ${path.parameters?.map((v) => v.name).join(' ') || ''}`;