rapidoc 9.1.7 → 9.3.0

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

@@ -1,6 +1,6 @@
 /* eslint-disable arrow-body-style */
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 
 const codeVerifier = '731DB1C3F7EA533B85E29492D26AA-1234567890-1234567890';
@@ -252,8 +252,8 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 
 /* eslint-disable indent */
 
-function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow) {
-  let { authorizationUrl, tokenUrl, refreshUrl } = authFlow.authorizationUrl;
+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)) {
     refreshUrl = `${this.selectedServer.computedUrl}/${refreshUrl.replace(/^\//, '')}`;
@@ -277,8 +277,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
     flowNameDisplay = flowName;
   }
   return html`
-    <div class="oauth-flow ${flowName}" style="padding: 12px 0; margin-bottom:12px;"> 
-      <div class="tiny-title upper" style="margin-bottom:8px;">${flowNameDisplay}</div> 
+    <div class="oauth-flow ${flowName}" style="padding: 12px 0; margin-bottom:12px;">
+      <div class="tiny-title upper" style="margin-bottom:8px;">${flowNameDisplay}</div>
       ${authorizationUrl
         ? html`<div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Auth URL</span> <span class="mono-font"> ${authorizationUrl} </span></div>`
         : ''
@@ -299,7 +299,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
               <div class= "oauth-scopes" part="section-auth-scopes" style = "width:100%; display:flex; flex-direction:column; flex-wrap:wrap; margin:0 0 10px 24px">
                 ${Object.entries(authFlow.scopes).map((scopeAndDescr, index) => html`
                   <div class="m-checkbox" style="display:inline-flex; align-items:center">
-                    <input type="checkbox" part="checkbox checkbox-auth-scope" class="scope-checkbox" id="${securitySchemeId}${flowName}${index}" value="${scopeAndDescr[0]}">
+                    <input type="checkbox" part="checkbox checkbox-auth-scope" class="scope-checkbox" id="${securitySchemeId}${flowName}${index}" ?checked="${defaultScopes.includes(scopeAndDescr[0])}" value="${scopeAndDescr[0]}">
                     <label for="${securitySchemeId}${flowName}${index}" style="margin-left:5px; cursor:pointer">
                       <span class="mono-font">${scopeAndDescr[0]}</span>
                         ${scopeAndDescr[0] !== scopeAndDescr[1] ? ` - ${scopeAndDescr[1] || ''}` : ''}
@@ -317,16 +317,16 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                 <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password">
               </div>`
             : ''
-          }  
+          }
           <div>
             ${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>
                   <label for="${securitySchemeId}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
                    Send Proof Key for Code Exchange (PKCE)
                   </label>
-                </div>  
+                </div>
               `
               : ''
             }
@@ -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>`
                   : ''
                 }`
@@ -356,7 +356,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
           `
         : ''
       }
-    </div>  
+    </div>
   `;
 }
 
@@ -424,14 +424,14 @@ export default function securitySchemeTemplate() {
                         ? html`Send <code>${v.name}</code> in <code>${v.in}</code>`
                         : html`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`
                       }
-                    </div>  
+                    </div>
                     <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">
                           <button class="m-btn thin-border" style = "margin-left:5px;"
                             part = "btn btn-outline"
-                            @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"> 
+                            @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
                             ${v.finalKeyValue ? 'UPDATE' : 'SET'}
                           </button>`
                         : html`<span class="gray-text" style="font-size::var(--font-size-small)"> cookies cannot be set from here</span>`
@@ -443,14 +443,14 @@ export default function securitySchemeTemplate() {
                   ? 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>
                     <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;">
                       <button class="m-btn thin-border"
                         @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
                         part = "btn btn-outline"
-                      > 
+                      >
                         ${v.finalKeyValue ? 'UPDATE' : 'SET'}
                       </button>
                     </div>`
@@ -462,12 +462,12 @@ 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]))} 
+                    ${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>    
+                </tr>
                 `
               : ''
-            }    
+            }
           `)}
         </table>`
       : ''
@@ -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;">
@@ -507,13 +514,16 @@ export function pathSecurityTemplate(pathSecurity) {
           </g>
         </svg>
           ${orSecurityKeys1.map((orSecurityItem1, i) => html`
-          
+
           ${orSecurityItem1.securityTypes
             ? html`
               ${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>` : ''}
@@ -522,11 +532,11 @@ export function pathSecurityTemplate(pathSecurity) {
                       const scopeHtml = html`${andSecurityItem.scopes !== ''
                         ? html`
                           <div>
-                            <b>Required scopes:</b> 
-                            <br/> 
-                            <div style="margin-left:8px">  
+                            <b>Required scopes:</b>
+                            <br/>
+                            <div style="margin-left:8px">
                               ${andSecurityItem.scopes.split(',').map((scope, cnt) => html`${cnt === 0 ? '' : '┃'}<span>${scope}</span>`)}
-                            </div>  
+                            </div>
                           </div>`
                         : ''
                       }`;
@@ -545,19 +555,19 @@ export function pathSecurityTemplate(pathSecurity) {
                         : andSecurityItem.type === 'http'
                           ? html`
                             <div>
-                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
+                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`}
                               ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b>
                               ${scopeHtml}
                             </div>`
                           : html`
                             <div>
-                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
+                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`}
                               Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b>
                               ${scopeHtml}
                             </div>`
                       }`;
                     })}
-                  </div>  
+                  </div>
                 </div>
               </div>
             `

package/src/templates/server-template.js

@@ -1,6 +1,6 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 export function setApiServer(serverUrl) {
   const serverObj = this.resolvedSpec?.servers.find((s) => s.url === serverUrl);
@@ -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/schema-utils.js

@@ -12,7 +12,7 @@ export function getTypeInfo(schema) {
     const schemaNode = schema.$ref.substring(n + 1);
     dataType = `{recursive: ${schemaNode}} `;
   } else if (schema.type) {
-    dataType = Array.isArray(schema.type) ? schema.type.join('┃') : schema.type;
+    dataType = Array.isArray(schema.type) ? schema.type.join(schema.length === 2 ? ' or ' : '┃') : schema.type;
     if (schema.format || schema.enum) {
       dataType = dataType.replace('string', schema.enum ? 'enum' : schema.format);
     }
@@ -32,7 +32,7 @@ export function getTypeInfo(schema) {
     readOrWriteOnly: (schema.readOnly ? '🆁' : schema.writeOnly ? '🆆' : ''),
     deprecated: schema.deprecated ? '❌' : '',
     examples: schema.examples || schema.example,
-    default: schema.default || '',
+    default: schema.default != null ? `${schema.default}` : '',
     description: schema.description || '',
     constrain: '',
     allowedValues: '',
@@ -389,12 +389,20 @@ export function schemaToSampleObj(schema, config = { }) {
         const oneOfSamples = schemaToSampleObj(schema.oneOf[key], config);
         for (const sampleKey in oneOfSamples) {
           // 2. In the final example include a one-of item along with properties
-          if (oneOfSamples[sampleKey] === null) {
-            const finalExample = Object.assign(oneOfSamples[sampleKey], objWithSchemaProps);
-            obj[`example-${i}`] = finalExample;
-            addSchemaInfoToExample(schema.oneOf[key], obj[`example-${i}`]);
-            i++;
+          let finalExample;
+          if (Object.keys(objWithSchemaProps).length > 0) {
+            if (oneOfSamples[sampleKey] === null || typeof oneOfSamples[sampleKey] !== 'object') {
+              // This doesn't really make sense since every oneOf schema _should_ be an object if there are common properties, so we'll skip this
+              continue;
+            } else {
+              finalExample = Object.assign(oneOfSamples[sampleKey], objWithSchemaProps);
+            }
+          } else {
+            finalExample = oneOfSamples[sampleKey];
           }
+          obj[`example-${i}`] = finalExample;
+          addSchemaInfoToExample(schema.oneOf[key], obj[`example-${i}`]);
+          i++;
         }
       }
     }
@@ -460,18 +468,22 @@ export function schemaToSampleObj(schema, config = { }) {
       }
     }
   } else if (schema.type === 'array' || schema.items) {
-    if (schema.example) {
-      obj['example-0'] = schema.example;
-    } else if (schema.items?.example) { // schemas and properties support single example but not multiple examples.
-      obj['example-0'] = [schema.items.example];
-    } else {
-      const samples = schemaToSampleObj(schema.items, config);
-      let i = 0;
-      for (const key in samples) {
-        obj[`example-${i}`] = [samples[key]];
-        addSchemaInfoToExample(schema.items, obj[`example-${i}`]);
-        i++;
+    if (schema.items || schema.example) {
+      if (schema.example) {
+        obj['example-0'] = schema.example;
+      } else if (schema.items?.example) { // schemas and properties support single example but not multiple examples.
+        obj['example-0'] = [schema.items.example];
+      } else {
+        const samples = schemaToSampleObj(schema.items, config);
+        let i = 0;
+        for (const key in samples) {
+          obj[`example-${i}`] = [samples[key]];
+          addSchemaInfoToExample(schema.items, obj[`example-${i}`]);
+          i++;
+        }
       }
+    } else {
+      obj['example-0'] = [];
     }
   } else {
     return { 'example-0': getSampleValueByType(schema) };
@@ -479,6 +491,32 @@ export function schemaToSampleObj(schema, config = { }) {
   return obj;
 }
 
+function generateMarkdownForArrayAndObjectDescription(schema, level = 0) {
+  let markdown = '';
+  if (schema.title) {
+    markdown = `**${schema.title}:** `;
+  }
+  if (schema.description) {
+    markdown = `${markdown} ${schema.description} ${schema.minItems || schema.maxItems ? '<span class="more-content">⤵</span><br/>' : ''}`;
+  }
+  if (schema.minItems) {
+    markdown = `${markdown} **Min Items:** ${schema.minItems}`;
+  }
+  if (schema.maxItems) {
+    markdown = `${markdown} **Max Items:** ${schema.maxItems}`;
+  }
+  if (level > 0 && schema.items?.description) {
+    let itemsMarkdown = '';
+    if (schema.items.minProperties) {
+      itemsMarkdown = `**Min Properties:** ${schema.items.minProperties}`;
+    }
+    if (schema.items.maxProperties) {
+      itemsMarkdown = `${itemsMarkdown} **Max Properties:** ${schema.items.maxProperties}`;
+    }
+    markdown = `${markdown} ⮕ ${itemsMarkdown} [ ${schema.items.description} ] `;
+  }
+  return markdown;
+}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -574,7 +612,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
     });
     let multiPrimitiveTypes;
     if (primitiveType.length > 0) {
-      subSchema.type = primitiveType.join('┃');
+      subSchema.type = primitiveType.join(primitiveType.length === 2 ? ' or ' : '┃');
       multiPrimitiveTypes = getTypeInfo(subSchema);
       if (complexTypes.length === 0) {
         return `${multiPrimitiveTypes?.html || ''}`;
@@ -597,6 +635,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
         } else if (v === 'object') {
           // If object type iterate all the properties and create an object-type-option
           const objTypeOption = {
+            '::title': schema.title || '',
             '::description': schema.description || '',
             '::type': 'object',
             '::deprecated': schema.deprecated || false,
@@ -611,6 +650,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
           multiTypeOptions[`::OPTION~${i + 1}`] = objTypeOption;
         } else if (v === 'array') {
           multiTypeOptions[`::OPTION~${i + 1}`] = {
+            '::title': schema.title || '',
             '::description': schema.description || '',
             '::type': 'array',
             '::props': schemaInObjectNotation(schema.items, {}, (level + 1)),
@@ -620,8 +660,9 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       multiTypeOptions[`::OPTION~${complexTypes.length + 1}`] = multiPrimitiveTypes?.html || '';
       obj['::ONE~OF'] = multiTypeOptions;
     }
-  } else if (schema.type === 'object' || schema.properties) {
-    obj['::description'] = schema.description || '';
+  } else if (schema.type === 'object' || schema.properties) { // If Object
+    obj['::title'] = schema.title || '';
+    obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
@@ -636,15 +677,12 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, {});
     }
   } else if (schema.type === 'array' || schema.items) { // If Array
-    obj['::description'] = schema.description
-      ? schema.description
-      : schema.items?.description
-        ? `array&lt;${schema.items.description}&gt;`
-        : '';
+    obj['::title'] = schema.title || '';
+    obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
-    if (schema.items.items) {
+    if (schema.items?.items) {
       obj['::array-type'] = schema.items.items.type;
     }
     obj['::props'] = schemaInObjectNotation(schema.items, {}, (level + 1));
@@ -787,6 +825,15 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
             exampleValue,
           });
         }
+      } else if (mimeType?.toLowerCase().includes('jose')) {
+        finalExamples.push({
+          exampleId: 'Example',
+          exampleSummary: 'Base64 Encoded',
+          exampleDescription: '',
+          exampleType: mimeType,
+          exampleValue: schema.pattern || 'bXJpbg==',
+          exampleFormat: 'text',
+        });
       } else {
         finalExamples.push({
           exampleId: 'Example',

package/src/utils/spec-parser.js

@@ -106,7 +106,7 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
     } else if (v.type === 'oauth2') {
       v.typeDisplay = `OAuth (${v.securitySchemeId})`;
     } else {
-      v.typeDisplay = v.type;
+      v.typeDisplay = v.type || 'None';
     }
   });
 

package/src/utils/theme.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ColorUtils from '~/utils/color-utils';
 /* Generates an schema object containing type and constraint info */
 export default function setTheme(baseTheme, theme = {}) {
@@ -11,7 +11,7 @@ export default function setTheme(baseTheme, theme = {}) {
 
   // Dark and Light Theme colors
   if (baseTheme === 'dark') {
-    const bg1 = theme.bg1 ? theme.bg1 : '#333';
+    const bg1 = theme.bg1 ? theme.bg1 : '#2a2b2c';
     const fg1 = theme.fg1 ? theme.fg1 : '#bbb';
 
     const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, 5); // or #383838;
@@ -27,7 +27,7 @@ export default function setTheme(baseTheme, theme = {}) {
     const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);
 
     const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, 10);
-    const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
+    const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.50');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);
@@ -96,7 +96,7 @@ export default function setTheme(baseTheme, theme = {}) {
       codeOperatorColor: theme.codeOperatorColor || '#67cdcc',
     };
   } else {
-    const bg1 = (theme.bg1 ? theme.bg1 : '#ffffff');
+    const bg1 = (theme.bg1 ? theme.bg1 : '#fafbfc');
     const fg1 = (theme.fg1 ? theme.fg1 : '#444444');
     const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, -5); // or '#fafafa'
     const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, -15); // or '#f6f6f6'
@@ -118,7 +118,7 @@ export default function setTheme(baseTheme, theme = {}) {
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : primaryColor;
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;
     */
-    const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -180);
+    const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -200);
     const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
@@ -260,6 +260,13 @@ export default function setTheme(baseTheme, theme = {}) {
     --nav-hover-text-color:${newTheme.navHoverTextColor};
     --nav-accent-color:${newTheme.navAccentColor};
 
+    /* Nav API Method Colors*/
+    --nav-get-color:${newTheme.blue};
+    --nav-put-color:${newTheme.orange};
+    --nav-post-color:${newTheme.green};
+    --nav-delete-color:${newTheme.red};
+    --nav-head-color:${newTheme.yellow};
+
     /* Primary Colors */  
     --primary-color:${newTheme.primaryColor};
     --primary-color-invert:${newTheme.primaryColorInvert};

package/webpack.config.js

@@ -29,7 +29,7 @@ const rapidocBanner = `
 * @preserve
 * RapiDoc ${rapidocVersion.replace()} - WebComponent to View OpenAPI docs
 * License: MIT
-* Repo   : https://github.com/mrin9/RapiDoc
+* Repo   : https://github.com/rapi-doc/RapiDoc
 * Author : Mrinmoy Majumdar
 *`;
 

package/.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-  "cSpell.ignoreWords": [
-    "doc",
-    "gtag",
-    "rapi"
-  ],
-  "cSpell.words": [
-    "descr",
-    "prismjs",
-    "webcomponent"
-  ]
-}

package/dist/index.html

@@ -1,6 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes"><title>RapiDoc</title><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css"><script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script><script defer="defer" src="rapidoc-min.js"></script></head><script>window.addEventListener('DOMContentLoaded', (event) => {
-    const docEl = document.getElementById('thedoc');
-    docEl.addEventListener('before-try', (e) => {
-      e.detail.request.headers.append('AAA-BBB', 'CCC DDDD');
-    });
-  });</script><body><rapi-doc spec-url="./specs/temp.yaml" id="thedoc" theme="dark" render-style="read" schema-style="tree" use-path-in-nav-bar="true" show-components="true" show-info="true" show-header="true" allow-search="false" allow-advanced-search="true" allow-spec-url-load="false" allow-spec-file-load="false" allow-spec-file-download="true" allow-server-selection="true" allow-authentication="true" update-route="false" match-type="regex" persist-auth="true"></rapi-doc></body></html>