rapidoc 9.1.3 → 9.1.4

package/src/components/schema-tree.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import FontStyles from '~/styles/font-styles';
 import SchemaStyles from '~/styles/schema-styles';
@@ -115,7 +115,6 @@ export default class SchemaTree extends LitElement {
               this.data['::type'] === 'array' ? this.data['::props'] : this.data,
               this.data['::type'],
               this.data['::array-type'] || '',
-
             )}`
           : html`<span class='mono-font' style='color:var(--red)'> Schema not found </span>`
         }
@@ -123,7 +122,28 @@ export default class SchemaTree extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+    if (this.schemaHideReadOnly === 'true') {
+      if (dataType === 'array') {
+        if (readOrWrite === 'readonly') {
+          return;
+        }
+      }
+      if (data['::readwrite'] === 'readonly') {
+        return;
+      }
+    }
+    if (this.schemaHideWriteOnly === 'true') {
+      if (dataType === 'array') {
+        if (readOrWrite === 'writeonly') {
+          return;
+        }
+      }
+      if (data['::readwrite'] === 'writeonly') {
+        return;
+      }
+    }
+
     if (!data) {
       return html`<div class="null" style="display:inline;">null</div>`;
     }
@@ -189,13 +209,13 @@ export default class SchemaTree extends LitElement {
           <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
             ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
               ? html`<span class='key-label xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
-              : keyLabel.endsWith('*')
-                ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
-                  ? ''
-                  : schemaLevel > 0
-                    ? html`<span class="key-label">${keyLabel}:</span>`
-                    : ''
+              : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
+                ? ''
+                : schemaLevel > 0
+                  ? html`<span class="key-label" title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWrite === 'writeonly' ? 'Write-Only' : ''}">
+                      ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span style="color:var(--red)">*</span>` : ''}${readOrWrite === 'readonly' ? html` 🆁` : readOrWrite === 'writeonly' ? html` 🆆` : readOrWrite}:
+                    </span>`
+                  : ''
             }
             ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
             ${openBracket}
@@ -204,10 +224,10 @@ export default class SchemaTree extends LitElement {
         </div>
         <div class='inside-bracket ${data['::type'] || 'no-type-info'}' style='padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px;'>
           ${Array.isArray(data) && data[0]
-            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}`
+            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
-                ${['::description', '::type', '::props', '::deprecated', '::array-type'].includes(dataKey)
+                ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
                   ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                     ? html`${this.generateTree(
                       data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -217,6 +237,7 @@ export default class SchemaTree extends LitElement {
                         data[dataKey]['::description'],
                         newSchemaLevel,
                         newIndentLevel,
+                        data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
                       )}`
                     : ''
                   : html`${this.generateTree(
@@ -227,6 +248,7 @@ export default class SchemaTree extends LitElement {
                     data[dataKey]['::description'],
                     newSchemaLevel,
                     newIndentLevel,
+                    data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
                   )}`
                 }
               `)}
@@ -240,15 +262,34 @@ export default class SchemaTree extends LitElement {
       `;
     }
 
-    // For Primitive Data types
-    const [type, readorWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, , deprecated] = data.split('~|~');
-    if (readorWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
+    // For Primitive types and array of Primitives
+    const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, , deprecated] = data.split('~|~');
+    if (primitiveReadOrWrite === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
     }
-    if (readorWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
+    if (primitiveReadOrWrite === '🆆' && this.schemaHideWriteOnly === 'true') {
       return;
     }
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
+
+    let finalReadWriteText = '';
+    let finalReadWriteTip = '';
+    if (dataType === 'array') {
+      if (readOrWrite === 'readonly') {
+        finalReadWriteText = '🆁';
+        finalReadWriteTip = 'Read-Only';
+      } else if (readOrWrite === 'writeonly') {
+        finalReadWriteText = '🆆';
+        finalReadWriteTip = 'Write-Only';
+      }
+    } else if (primitiveReadOrWrite === '🆁') {
+        finalReadWriteText = '🆁';
+        finalReadWriteTip = 'Read-Only';
+      } else if (primitiveReadOrWrite === '🆆') {
+        finalReadWriteText = '🆆';
+        finalReadWriteTip = 'Write-Only';
+      }
+
     return html`
       <div class = "tr primitive">
         <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px' >
@@ -258,9 +299,9 @@ export default class SchemaTree extends LitElement {
               ? html`<span class='key-label xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : html`<span class="key-label">${keyLabel}:</span>`
           }
-          <span class="${dataTypeCss}" > 
+          <span class="${dataTypeCss}" title="${finalReadWriteTip}"> 
             ${dataType === 'array' ? `[${type}]` : `${type}`}
-            ${readorWriteOnly}
+            ${finalReadWriteText}
           </span>
         </div>
         <div class='td key-descr'>

package/src/components/tag-input.js

@@ -38,7 +38,14 @@ export default class TagInput extends LitElement {
   afterPaste(e) {
     const clipboardData = e.clipboardData || window.clipboardData;
     const pastedData = clipboardData.getData('Text');
-    this.value = pastedData ? pastedData.split(',').filter((v) => v.trim() !== '') : '';
+    const pastedArray = pastedData ? pastedData.split(',').filter((v) => v.trim() !== '') : '';
+    if (pastedArray) {
+      if (Array.isArray(this.value)) {
+        this.value = [...this.value, ...pastedArray];
+      } else {
+        this.value = pastedArray;
+      }
+    }
     e.preventDefault();
   }
 

package/src/json-schema-viewer.js

@@ -1,5 +1,5 @@
 import { css, LitElement } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-yaml';

package/src/rapidoc-mini.js

@@ -1,5 +1,5 @@
 import { css, LitElement } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-yaml';
@@ -49,6 +49,7 @@ export default class RapiDocMini extends LitElement {
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       showSummaryWhenCollapsed: { type: String, attribute: 'show-summary-when-collapsed' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
 
       // Schema Styles
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -166,6 +167,7 @@ export default class RapiDocMini extends LitElement {
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
 
     if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }
@@ -318,6 +320,8 @@ export default class RapiDocMini extends LitElement {
       }
     }
     this.requestUpdate();
+    // eslint-disable-next-line no-await-in-loop
+    while (!await this.updateComplete);
     const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });
     this.dispatchEvent(specLoadedEvent);
   }

package/src/rapidoc.js

@@ -1,5 +1,5 @@
 import { css, LitElement, unsafeCSS } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-yaml';
@@ -63,6 +63,7 @@ export default class RapiDoc extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
       onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
       // Schema Styles
@@ -434,6 +435,7 @@ export default class RapiDoc extends LitElement {
     this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
     this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '300px';
@@ -709,6 +711,8 @@ export default class RapiDoc extends LitElement {
       }
     }
     this.requestUpdate();
+    // eslint-disable-next-line no-await-in-loop
+    while (!await this.updateComplete);
     const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });
     this.dispatchEvent(specLoadedEvent);
 

package/src/styles/font-styles.js

@@ -88,8 +88,9 @@ export default css`
     font-size: var(--font-size-regular);
     line-height:calc(var(--font-size-regular) + 8px);
   }
-  .m-markdown li{
-    line-height:calc(var(--font-size-regular) + 12px);
+  .m-markdown li {
+    font-size: var(--font-size-regular);
+    line-height:calc(var(--font-size-regular) + 10px);
   }
   
   .m-markdown-small p,

package/src/styles/nav-styles.js

@@ -15,8 +15,8 @@ export default css`
   flex-wrap:nowrap;
   word-break:break-word;
 }
-::slotted(*){
-  padding:16px 30px 0 16px;
+::slotted([slot=nav-logo]){
+  padding:16px 16px 0 16px;
 }
 .nav-scroll {
   overflow-x: hidden;

package/src/templates/components-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { schemaInObjectNotation } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
@@ -19,8 +19,8 @@ function schemaBodyTemplate(sComponent) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-        schema-hide-read-only = false
-        schema-hide-write-only = ${this.schemaHideWriteOnly}
+        schema-hide-read-only = "false"
+        schema-hide-write-only = "${this.schemaHideWriteOnly}"
       > </schema-tree> `
     : html`
       <schema-tree
@@ -29,8 +29,8 @@ function schemaBodyTemplate(sComponent) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-        schema-hide-read-only = false
-        schema-hide-write-only = ${this.schemaHideWriteOnly}
+        schema-hide-read-only = "false"
+        schema-hide-write-only = "${this.schemaHideWriteOnly}"
       > </schema-tree>`
 }
   </div>`;

package/src/templates/endpoint-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import '~/components/api-request';
 import '~/components/api-response';
 import codeSamplesTemplate from '~/templates/code-samples-template';

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { rapidocApiKey } from '~/utils/common-utils';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
 import codeSamplesTemplate from '~/templates/code-samples-template';

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { expandedEndpointBodyTemplate } from '~/templates/expanded-endpoint-template';
 import '~/components/api-request';
 import '~/components/api-response';

package/src/templates/header-template.js

@@ -52,7 +52,7 @@ export default function headerTemplate() {
         `
       }
       
-      ${(this.allowSearch === 'false' || this.allowAdvancedSearch === 'false' || 'read focused'.includes(this.renderStyle))
+      ${(this.allowAdvancedSearch === 'false' || 'read focused'.includes(this.renderStyle))
         ? ''
         : html`
           <button class="m-btn primary only-large-screen" part="btn btn-fill btn-search" style="margin-left:10px;" @click="${this.onShowSearchModalClicked}">

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

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 // Templates
@@ -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.examples, jSchemaBody.example, jSchemaBody.schema, 'json', true, false, 'json', true);
+      const examplesObj = generateExample(jSchemaBody.schema, 'json', jSchemaBody.examples, 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)">
@@ -60,12 +60,12 @@ function jsonSchemaBodyTemplate() {
           <div style="display:flex; flex-direction: row; gap:16px;">
             <div class="json-schema-def" style="flex:1; padding:16px 0 16px 16px; ">
               <schema-tree
-                .data = '${schemaInObjectNotation(jSchemaBody.schema, {})}'
+                .data = "${schemaInObjectNotation(jSchemaBody.schema, {})}"
                 schema-expand-level = "${this.schemaExpandLevel}"
                 schema-description-expanded = "${this.schemaDescriptionExpanded}"
                 allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-                schema-hide-read-only = false
-                schema-hide-write-only = false
+                schema-hide-read-only = "false"
+                schema-hide-write-only = "false"
               > </schema-tree>
             </div>
             <div class="json-schema-example-panel" style="width:400px; background-color: var(--input-bg); padding:16px 0 16px 16px; border-left: 1px dashed var(--border-color);">
@@ -81,9 +81,9 @@ function jsonSchemaBodyTemplate() {
               }
               ${examplesObj.map((v) => html`
                 <json-tree 
-                  .data="${v.exampleValue}"
-                  data-example = '${v.exampleId}'
-                  class = 'example'
+                  .data = "${v.exampleValue}"
+                  data-example = "${v.exampleId}"
+                  class = "example"
                   style = "margin-top:16px; display: ${v.exampleId === jSchemaBody.selectedExample ? 'flex' : 'none'}"
                 ></json-tree>`)
               }

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

@@ -6,7 +6,7 @@ import focusedEndpointTemplate from '~/templates/focused-endpoint-template';
 import overviewTemplate from '~/templates/overview-template';
 import endpointTemplate from '~/templates/endpoint-template';
 import serverTemplate from '~/templates/server-template';
-import securitySchemeTemplate from '~/templates/security-scheme-template';
+import securitySchemeTemplate, { recoverPersistedApiKeys } from '~/templates/security-scheme-template';
 import headerTemplate from '~/templates/header-template';
 import navbarTemplate from '~/templates/navbar-template';
 import advancedSearchTemplate from '~/templates/advance-search-template';
@@ -17,6 +17,9 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
   if (!this.resolvedSpec) {
     return '';
   }
+  if (this.persistAuth === 'true') {
+    recoverPersistedApiKeys.call(this);
+  }
   const newTheme = {
     bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',
     fg1: isValidHexColor(this.textColor) ? this.textColor : '',

package/src/templates/navbar-template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { pathIsInSearch } from '~/utils/common-utils';
 
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
@@ -50,7 +50,7 @@ export default function navbarTemplate() {
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`
-        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
+        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
           ${this.allowSearch === 'false'
             ? ''
             : html`

package/src/templates/overview-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { downloadResource, viewResource } from '~/utils/common-utils';
 
 /* eslint-disable indent */
@@ -51,7 +51,10 @@ export default function overviewTemplate() {
               ? 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="width:200px" part="btn btn-outline" @click='${(e) => { viewResource(this.specUrl, e); }}'>View OpenAPI spec (New Tab)</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>`
+                    : ''
+                  }
                 </div>`
               : ''
             }

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

@@ -1,11 +1,13 @@
 /* eslint-disable arrow-body-style */
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 
 const codeVerifier = '731DB1C3F7EA533B85E29492D26AA-1234567890-1234567890';
 const codeChallenge = '4FatVDBJKPAo4JgLLaaQFMUcQPn5CrPRvLlaob9PTYc'; // Base64 encoded SHA-256
 
+const localStorageKey = 'rapidoc';
+
 export function applyApiKey(securitySchemeId, username = '', password = '', providedApikeyVal = '') {
   const securityObj = this.resolvedSpec.securitySchemes?.find((v) => (v.securitySchemeId === securitySchemeId));
   if (!securityObj) {
@@ -17,7 +19,8 @@ export function applyApiKey(securitySchemeId, username = '', password = '', prov
       finalApiKeyValue = `Basic ${btoa(`${username}:${password}`)}`;
     }
   } else if (providedApikeyVal) {
-    finalApiKeyValue = `${securityObj.scheme?.toLowerCase() === 'bearer' ? 'Bearer' : ''} ${providedApikeyVal}`;
+    securityObj.value = providedApikeyVal;
+    finalApiKeyValue = `${securityObj.scheme?.toLowerCase() === 'bearer' ? 'Bearer ' : ''}${providedApikeyVal}`;
   }
   if (finalApiKeyValue) {
     securityObj.finalKeyValue = finalApiKeyValue;
@@ -37,6 +40,21 @@ export function onClearAllApiKeys() {
   this.requestUpdate();
 }
 
+function getPersistedApiKeys() {
+  return JSON.parse(localStorage.getItem(localStorageKey)) || {};
+}
+
+function setPersistedApiKeys(obj) {
+  localStorage.setItem(localStorageKey, JSON.stringify(obj));
+}
+
+export function recoverPersistedApiKeys() {
+  const rapidocLs = getPersistedApiKeys.call(this);
+  Object.values(rapidocLs).forEach((p) => {
+    applyApiKey.call(this, p.securitySchemeId, p.username, p.password, p.value);
+  });
+}
+
 function onApiKeyChange(securitySchemeId) {
   let apiKeyValue = '';
   const securityObj = this.resolvedSpec.securitySchemes.find((v) => (v.securitySchemeId === securitySchemeId));
@@ -51,12 +69,17 @@ function onApiKeyChange(securitySchemeId) {
         apiKeyValue = trEl.querySelector('.api-key-input').value.trim();
         applyApiKey.call(this, securitySchemeId, '', '', apiKeyValue);
       }
+      if (this.persistAuth === 'true') {
+        const rapidocLs = getPersistedApiKeys.call(this);
+        rapidocLs[securitySchemeId] = securityObj;
+        setPersistedApiKeys.call(this, rapidocLs);
+      }
     }
   }
 }
 
 // Updates the OAuth Access Token (API key), so it reflects in UI and gets used in TRY calls
-function updateOAuthKey(securitySchemeId, tokenType = 'Bearer', accessToken) {
+function updateOAuthKey(securitySchemeId, accessToken, tokenType = 'Bearer') {
   const securityObj = this.resolvedSpec.securitySchemes.find((v) => (v.securitySchemeId === securitySchemeId));
   securityObj.finalKeyValue = `${(tokenType.toLowerCase() === 'bearer' ? 'Bearer' : (tokenType.toLowerCase() === 'mac' ? 'MAC' : tokenType))} ${accessToken}`;
   this.requestUpdate();
@@ -64,7 +87,7 @@ function updateOAuthKey(securitySchemeId, tokenType = 'Bearer', accessToken) {
 
 /* eslint-disable no-console */
 // Gets Access-Token in exchange of Authorization Code
-async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, grantType, authCode, sendClientSecretIn = 'header', securitySchemeId, authFlowDivEl, scopes = null, username = null, password = null) {
+async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, grantType, authCode, securitySchemeId, authFlowDivEl, sendClientSecretIn = 'header', scopes = null, username = null, password = null) {
   const respDisplayEl = authFlowDivEl ? authFlowDivEl.querySelector('.oauth-resp-display') : undefined;
   const urlFormParams = new URLSearchParams();
   const headers = new Headers();
@@ -95,7 +118,7 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
     const tokenResp = await resp.json();
     if (resp.ok) {
       if (tokenResp.token_type && tokenResp.access_token) {
-        updateOAuthKey.call(this, securitySchemeId, tokenResp.token_type, tokenResp.access_token);
+        updateOAuthKey.call(this, securitySchemeId, tokenResp.access_token, tokenResp.token_type);
         if (respDisplayEl) {
           respDisplayEl.innerHTML = '<span style="color:var(--green)">Access Token Received</span>';
         }
@@ -131,10 +154,10 @@ async function onWindowMessageEvent(msgEvent, winObj, tokenUrl, clientId, client
   if (msgEvent.data) {
     if (msgEvent.data.responseType === 'code') {
       // Authorization Code flow
-      fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrl, grantType, msgEvent.data.code, sendClientSecretIn, securitySchemeId, authFlowDivEl);
+      fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrl, grantType, msgEvent.data.code, securitySchemeId, authFlowDivEl, sendClientSecretIn);
     } else if (msgEvent.data.responseType === 'token') {
       // Implicit flow
-      updateOAuthKey.call(this, securitySchemeId, msgEvent.data.token_type, msgEvent.data.access_token);
+      updateOAuthKey.call(this, securitySchemeId, msgEvent.data.access_token, msgEvent.data.token_type);
     }
   }
 }
@@ -218,11 +241,11 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
   } else if (flowType === 'clientCredentials') {
     grantType = 'client_credentials';
     const selectedScopes = checkedScopeEls.map((v) => v.value).join(' ');
-    fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrlObj.toString(), grantType, '', sendClientSecretIn, securitySchemeId, authFlowDivEl, selectedScopes);
+    fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrlObj.toString(), grantType, '', securitySchemeId, authFlowDivEl, sendClientSecretIn, selectedScopes);
   } else if (flowType === 'password') {
     grantType = 'password';
     const selectedScopes = checkedScopeEls.map((v) => v.value).join(' ');
-    fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrlObj.toString(), grantType, '', sendClientSecretIn, securitySchemeId, authFlowDivEl, selectedScopes, username, password);
+    fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, redirectUrlObj.toString(), grantType, '', securitySchemeId, authFlowDivEl, sendClientSecretIn, selectedScopes, username, password);
   }
 }
 /* eslint-enable no-console */
@@ -339,6 +362,20 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
   `;
 }
 
+function removeApiKey(securitySchemeId) {
+  const securityObj = this.resolvedSpec.securitySchemes?.find((v) => (v.securitySchemeId === securitySchemeId));
+  securityObj.user = '';
+  securityObj.password = '';
+  securityObj.value = '';
+  securityObj.finalKeyValue = '';
+  if (this.persistAuth === 'true') {
+    const rapidocLs = getPersistedApiKeys.call(this);
+    delete rapidocLs[securityObj.securitySchemeId];
+    setPersistedApiKeys.call(this, rapidocLs);
+  }
+  this.requestUpdate();
+}
+
 export default function securitySchemeTemplate() {
   if (!this.resolvedSpec) { return ''; }
   const providedApiKeys = this.resolvedSpec.securitySchemes?.filter((v) => (v.finalKeyValue));
@@ -369,7 +406,7 @@ export default function securitySchemeTemplate() {
                   ${v.finalKeyValue
                     ? html`
                       <span class='blue-text'>  ${v.finalKeyValue ? 'Key Applied' : ''} </span>
-                      <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>
+                      <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { removeApiKey.call(this, v.securitySchemeId); }}>REMOVE</button>
                       `
                     : ''
                   }
@@ -427,9 +464,7 @@ export default function securitySchemeTemplate() {
               ? html`
                 <tr>
                   <td style="border:none; padding-left:48px">
-                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(
-                      this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f],
-                    ))} 
+                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f]))} 
                   </td>
                 </tr>    
                 `

package/src/templates/server-template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 export function setApiServer(serverUrl) {

package/src/utils/common-utils.js

@@ -10,10 +10,11 @@ export function debounce(fn, delay) {
   };
 }
 
-export const invalidCharsRegEx = new RegExp(/[\s#:?&={}]/, 'g'); // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
+export const invalidCharsRegEx = /[\s#:?&={}]/g; // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
 export const rapidocApiKey = '_rapidoc_api_key';
 
 export function sleep(ms) {
+  // eslint-disable-next-line no-promise-executor-return
   return new Promise((resolve) => setTimeout(resolve, ms));
 }