rapidoc 9.2.0 → 9.3.3

package/src/components/schema-table.js

@@ -47,7 +47,7 @@ export default class SchemaTable extends LitElement {
         width: 240px;
       }
       .key.deprecated .key-label {
-        text-decoration: line-through;
+        color: var(--red);
       }
 
       .table .key-type {
@@ -92,7 +92,7 @@ export default class SchemaTable extends LitElement {
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
               </div>
             `
@@ -100,7 +100,7 @@ export default class SchemaTable extends LitElement {
           }
         </div>
         ${this.data?.['::description']
-          ? html`<span class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
+          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
           : ''
         }
         <div style = 'border:1px solid var(--light-border-color)'>
@@ -130,7 +130,7 @@ export default class SchemaTable extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'readonly') {
+      if (data && data['::readwrite'] === 'readonly') {
         return;
       }
     }
@@ -140,17 +140,27 @@ export default class SchemaTable extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'writeonly') {
+      if (data && data['::readwrite'] === 'writeonly') {
         return;
       }
     }
+    if (!data) {
+      return html`<div class="null" style="display:inline;">
+        <span style='margin-left:${(schemaLevel + 1) * 16}px'> &nbsp; </span>
+        <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span>
+        ${
+          dataType === 'array'
+            ? html`<span class='mono-font'> [ ] </span>`
+            : dataType === 'object'
+              ? html`<span class='mono-font'> { } </span>`
+              : html`<span class='mono-font'> schema undefined </span>`
+        }
+      </div>`;
+    }
 
     const newSchemaLevel = data['::type']?.startsWith('xxx-of') ? schemaLevel : (schemaLevel + 1);
     const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : (indentLevel + 1);
     const leftPadding = 16 * newIndentLevel; // 2 space indentation at each level
-    if (!data) {
-      return html`<div class="null" style="display:inline;">null</div>`;
-    }
     if (Object.keys(data).length === 0) {
       return html`<span class="td key object" style='padding-left:${leftPadding}px'>${key}</span>`;
     }
@@ -173,14 +183,14 @@ export default class SchemaTable extends LitElement {
       if (dataType === 'array') {
         detailObjType = 'array of object'; // Array of Object
       } else {
-        detailObjType = 'object';
+        detailObjType = data['::dataTypeLabel'] || data['::type'];
       }
     } else if (data['::type'] === 'array') {
       if (dataType === 'array') {
         // detailObjType = 'array of array'; // Array of array
         detailObjType = `array of array ${arrayType !== 'object' ? `of ${arrayType}` : ''}`; // Array of array
       } else {
-        detailObjType = 'array';
+        detailObjType = data['::dataTypeLabel'] || data['::type'];
       }
     }
 
@@ -188,7 +198,7 @@ export default class SchemaTable extends LitElement {
       return html`
         ${newSchemaLevel >= 0 && key
           ? html`
-            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}'>
+            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${data['::deprecated'] ? 'Deprecated' : ''}">
               <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
@@ -204,8 +214,8 @@ export default class SchemaTable extends LitElement {
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
                   ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
                   : keyLabel.endsWith('*')
-                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -234,7 +244,7 @@ export default class SchemaTable extends LitElement {
           ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, '')}`
           : html`
             ${Object.keys(data).map((dataKey) => html`
-              ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+              ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel'].includes(dataKey)
                 ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                   ? html`${this.generateTree(
                     data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -287,23 +297,35 @@ export default class SchemaTable extends LitElement {
         </div>`;
     }
     return html`
-      <div class = "tr primitive">
+      <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
         <div class="td key ${deprecated}" style='padding-left:${leftPadding}px'>
+          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel?.endsWith('*')
-            ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+            ? html`
+              <span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span>
+              <span style='color:var(--red);'>*</span>`
             : key.startsWith('::OPTION')
               ? html`<span class='xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`
           }
         </div>
         ${dataTypeHtml}
-        <div class='td key-descr'>
+        <div class='td key-descr' @click="${() => { this.schemaDescriptionExpanded = 'true'; }}">
           ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
+          ${schemaDescription
+            ? html`<span class="m-markdown-small">
+              ${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription} ${constraint || defaultValue || allowedValues || pattern ? '<span  class="more-content">⤵</span>' : ''}`))}
+              </span>`
+            : schemaTitle
+              ? html`${schemaTitle} ${constraint || defaultValue || allowedValues || pattern
+                ? html`<span class="more-content">⤵</span>`
+                : ''}`
+              : ''
+          }
           ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
           ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}`))}</span>` : ''}
         </div>
       </div>
     `;

package/src/components/schema-tree.js

@@ -52,7 +52,16 @@ export default class SchemaTree extends LitElement {
         max-width: 300px;
       }
       .key.deprecated .key-label {
-        text-decoration: line-through; 
+        color: var(--red);
+      }
+      .tr.expanded:hover > .td.key > .open-bracket {
+        color: var(--primary-color);
+      }
+      .tr.expanded:hover + .inside-bracket {
+        border-left: 1px solid var(--fg3);
+      }
+      .tr.expanded:hover + .inside-bracket + .close-bracket {
+        color: var(--primary-color);
       }
 
       .open-bracket{
@@ -98,7 +107,7 @@ export default class SchemaTree extends LitElement {
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-toolbar-item schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
               </div>
             `
@@ -106,7 +115,7 @@ export default class SchemaTree extends LitElement {
           }
         </div>
         ${this.data?.['::description']
-          ? html`<span class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
+          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
           : ''
         }
         ${this.data
@@ -129,7 +138,7 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'readonly') {
+      if (data && data['::readwrite'] === 'readonly') {
         return;
       }
     }
@@ -139,13 +148,22 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'writeonly') {
+      if (data && data['::readwrite'] === 'writeonly') {
         return;
       }
     }
 
     if (!data) {
-      return html`<div class="null" style="display:inline;">null</div>`;
+      return html`<div class="null" style="display:inline;">
+        <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span>
+        ${
+          dataType === 'array'
+            ? html`<span class='mono-font'> [ ] </span>`
+            : dataType === 'object'
+              ? html`<span class='mono-font'> { } </span>`
+              : html`<span class='mono-font'> schema undefined </span>`
+        }
+      </div>`;
     }
     if (Object.keys(data).length === 0) {
       return html`<span class="key object">${key}:{ }</span>`;
@@ -205,14 +223,15 @@ export default class SchemaTree extends LitElement {
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}">
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
           <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>`
+              ? html`<span class='key-label xxx-of-key'> ${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
                 ? ''
                 : schemaLevel > 0
                   ? html`<span class="key-label" title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWrite === 'writeonly' ? 'Write-Only' : ''}">
+                      ${data['::deprecated'] ? '✗' : ''}
                       ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span style="color:var(--red)">*</span>` : ''}${readOrWrite === 'readonly' ? html` 🆁` : readOrWrite === 'writeonly' ? html` 🆆` : readOrWrite}:
                     </span>`
                   : ''
@@ -227,7 +246,7 @@ export default class SchemaTree extends LitElement {
             ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
-                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel'].includes(dataKey)
                   ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                     ? html`${this.generateTree(
                       data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -291,8 +310,9 @@ export default class SchemaTree extends LitElement {
       }
 
     return html`
-      <div class = "tr primitive">
-        <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px' >
+      <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
+        <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px'>
+          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel.endsWith('*')
             ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
             : key.startsWith('::OPTION')
@@ -306,11 +326,20 @@ export default class SchemaTree extends LitElement {
         </div>
         <div class='td key-descr'>
           ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
+          ${schemaDescription
+            ? html`<span class="m-markdown-small">
+              ${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription} ${constraint || defaultValue || allowedValues || pattern ? '<span class="more-content">⤵</span>' : ''}`))}
+              </span>`
+            : schemaTitle
+              ? html`${schemaTitle} ${constraint || defaultValue || allowedValues || pattern
+                ? html`<span class="more-content">⤵</span>`
+                : ''}`
+              : ''
+          }
           ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${constraint}</div>` : ''}
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
           ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}`))}</span>` : ''}
         </div>
       </div>
     `;

package/src/json-schema-viewer.js

@@ -134,7 +134,7 @@ export default class JsonSchemaViewer extends LitElement {
       .main-content::-webkit-scrollbar-thumb {
         background-color: var(--border-color);
       }
-      .header {
+      .main-header {
         background-color:var(--header-bg);
         color:var(--header-fg);
         width:100%;
@@ -229,7 +229,6 @@ export default class JsonSchemaViewer extends LitElement {
     if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
-    if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
     if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
     if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
     if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }

package/src/rapidoc-mini.js

@@ -25,6 +25,8 @@ import EndpointStyles from '~/styles/endpoint-styles';
 import { rapidocApiKey } from '~/utils/common-utils';
 import ProcessSpec from '~/utils/spec-parser';
 import mainBodyTemplate from '~/templates/main-body-template';
+import { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';
+import { setApiServer } from '~/templates/server-template';
 
 export default class RapiDocMini extends LitElement {
   constructor() {
@@ -301,6 +303,27 @@ export default class RapiDocMini extends LitElement {
     }
   }
 
+  // Public Method - to update security-scheme of type http
+  setHttpUserNameAndPassword(securitySchemeId, username, password) {
+    return applyApiKey.call(this, securitySchemeId, username, password);
+  }
+
+  // Public Method - to update security-scheme of type apiKey or OAuth
+  setApiKey(securitySchemeId, apiKeyValue) {
+    return applyApiKey.call(this, securitySchemeId, '', '', apiKeyValue);
+  }
+
+  // Public Method
+  removeAllSecurityKeys() {
+    return onClearAllApiKeys.call(this);
+  }
+
+  // Public Method
+  setApiServer(apiServerUrl) {
+    // return apiServerUrl;
+    return setApiServer.call(this, apiServerUrl);
+  }
+
   async afterSpecParsedAndValidated(spec) {
     this.resolvedSpec = spec;
     this.selectedServer = undefined;

package/src/rapidoc.js

@@ -107,6 +107,8 @@ export default class RapiDoc extends LitElement {
       regularFont: { type: String, attribute: 'regular-font' },
       monoFont: { type: String, attribute: 'mono-font' },
       loadFonts: { type: String, attribute: 'load-fonts' },
+      cssFile: { type: String, attribute: 'css-file' },
+      cssClasses: { type: String, attribute: 'css-classes' },
 
       // Nav Bar Colors
       navBgColor: { type: String, attribute: 'nav-bg-color' },
@@ -115,6 +117,7 @@ export default class RapiDoc extends LitElement {
       navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },
       navAccentColor: { type: String, attribute: 'nav-accent-color' },
       navItemSpacing: { type: String, attribute: 'nav-item-spacing' },
+      showMethodInNavBar: { type: String, attribute: 'show-method-in-nav-bar' },
       usePathInNavBar: { type: String, attribute: 'use-path-in-nav-bar' },
       infoDescriptionHeadingsInNavBar: { type: String, attribute: 'info-description-headings-in-navbar' },
 
@@ -250,7 +253,7 @@ export default class RapiDoc extends LitElement {
       .tag.title {
         text-transform: uppercase;
       }
-      .header {
+      .main-header {
         background-color:var(--header-bg);
         color:var(--header-fg);
         width:100%;
@@ -327,6 +330,30 @@ export default class RapiDoc extends LitElement {
         100% { transform: rotate(360deg); }
       }
 
+      .nav-method { font-weight: bold; margin-right: 4px; font-size: calc(var(--font-size-small) - 2px); white-space: nowrap; }
+      .nav-method.false { display: none; }
+
+      .nav-method.as-colored-text.get { color:var(--nav-get-color); }
+      .nav-method.as-colored-text.put { color:var(--nav-put-color); }
+      .nav-method.as-colored-text.post { color:var(--nav-post-color); }
+      .nav-method.as-colored-text.delete { color:var(--nav-delete-color); }
+      .nav-method.as-colored-text.head, .nav-method.as-colored-text.patch, .nav-method.as-colored-text.options { color:var(--nav-head-color); }
+      
+      .nav-method.as-colored-block {
+        padding: 1px 4px;
+        min-width: 30px;
+        border-radius: 4px 0 0 4px;
+        color: #000;
+      }
+
+      .nav-method.as-colored-block.get { background-color: var(--blue); }
+      .nav-method.as-colored-block.put { background-color: var(--orange); }
+      .nav-method.as-colored-block.post { background-color: var(--green); }
+      .nav-method.as-colored-block.delete { background-color: var(--red); }
+      .nav-method.as-colored-block.head, .nav-method.as-colored-block.patch , .nav-method.as-colored-block.options { 
+        background-color: var(--yellow); 
+      }
+
       @media only screen and (min-width: 768px) {
         .nav-bar {
           width: 260px;
@@ -423,22 +450,15 @@ export default class RapiDoc extends LitElement {
     }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
-    const writeMethodsWithBody = ['post', 'put', 'patch'];
-    if (!this.schemaHideReadOnly) {
-      this.schemaHideReadOnly = writeMethodsWithBody;
-    } else if (this.schemaHideReadOnly !== 'never') {
-      this.schemaHideReadOnly = writeMethodsWithBody.filter((value) => this.schemaHideReadOnly.includes(value));
-      if (this.schemaHideReadOnly.length === 0) {
-        this.schemaHideReadOnly = writeMethodsWithBody;
-      }
-    }
-    this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
-    this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
+
+    if (!this.schemaHideReadOnly || !'default, never,'.includes(`${this.schemaHideReadOnly},`)) { this.schemaHideReadOnly = 'default'; }
+    if (!this.schemaHideWriteOnly || !'default, never,'.includes(`${this.schemaHideWriteOnly},`)) { this.schemaHideWriteOnly = 'default'; }
+
     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';
+      this.responseAreaHeight = '400px';
     }
 
     if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }
@@ -456,6 +476,7 @@ export default class RapiDoc extends LitElement {
     if (!this.generateMissingTags || !'true, false,'.includes(`${this.generateMissingTags},`)) { this.generateMissingTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary, none,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
     if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }
+    if (!this.showMethodInNavBar || !'false, as-plain-text, as-colored-text, as-colored-block,'.includes(`${this.showMethodInNavBar},`)) { this.showMethodInNavBar = 'false'; }
     if (!this.usePathInNavBar || !'true, false,'.includes(`${this.usePathInNavBar},`)) { this.usePathInNavBar = 'false'; }
     if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
 
@@ -472,6 +493,9 @@ export default class RapiDoc extends LitElement {
 
     if (!this.showAdvancedSearchDialog) { this.showAdvancedSearchDialog = false; }
 
+    if (!this.cssFile) { this.cssFile = null; }
+    if (!this.cssClasses) { this.cssClasses = ''; }
+
     marked.setOptions({
       highlight: (code, lang) => {
         if (Prism.languages[lang]) {
@@ -504,6 +528,11 @@ export default class RapiDoc extends LitElement {
 
   render() {
     // return render(mainBodyTemplate(this), this.shadowRoot, { eventContext: this });
+    const cssLinkEl = document.querySelector(`link[href*="${this.cssFile}"]`);
+    // adding custom style for RapiDoc
+    if (cssLinkEl) {
+      this.shadowRoot.appendChild(cssLinkEl.cloneNode());
+    }
     return mainBodyTemplate.call(this);
   }
 
@@ -736,8 +765,11 @@ export default class RapiDoc extends LitElement {
         this.scrollTo(elementId);
       }
     } else if (this.renderStyle === 'focused') {
-      const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];
-      this.scrollTo(defaultElementId);
+      // If goto-path is provided and no location-hash is present then try to scroll to default element
+      if (!this.gotoPath) {
+        const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];
+        this.scrollTo(defaultElementId);
+      }
     }
   }
 
@@ -855,6 +887,12 @@ export default class RapiDoc extends LitElement {
       return;
     }
     this.isIntersectionObserverActive = false;
+    if (this.renderStyle === 'focused') {
+      const requestEl = this.shadowRoot.querySelector('api-request');
+      if (requestEl) {
+        requestEl.beforerNavigationFocusedMode();
+      }
+    }
     this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
@@ -867,7 +905,6 @@ export default class RapiDoc extends LitElement {
       // for focused mode update this.focusedElementId to update the rendering, else it wont find the needed html elements
       // focusedElementId will get validated in the template
       this.focusedElementId = elementId;
-      await sleep(0);
     }
     if (this.renderStyle === 'view') {
       this.expandAndGotoOperation(elementId, expandPath, true);
@@ -885,7 +922,7 @@ export default class RapiDoc extends LitElement {
         if (this.renderStyle === 'focused') {
           const requestEl = this.shadowRoot.querySelector('api-request');
           if (requestEl) {
-            requestEl.resetRequestBodySelection();
+            requestEl.afterNavigationFocusedMode();
           }
           const responseEl = this.shadowRoot.querySelector('api-response');
           if (responseEl) {

package/src/styles/endpoint-styles.js

@@ -105,7 +105,7 @@ export default css`
   word-break: break-all;
 }
 
-.method{
+.endpoint-head .method{
   padding:2px 5px;
   vertical-align: middle;
   font-size:var(--font-size-small);
@@ -119,14 +119,14 @@ export default css`
   text-transform:uppercase;
   margin-right:5px;
 }
-.method.delete{ border: 2px solid var(--red);}
-.method.put{ border: 2px solid var(--orange); }
-.method.post{ border: 2px solid var(--green); }
-.method.get{ border: 2px solid var(--blue); }
-.method.get.deprecated{ border: 2px solid var(--border-color); }
-.method.head,
-.method.patch,
-.method.options { 
+.endpoint-head .method.delete{ border: 2px solid var(--red);}
+.endpoint-head .method.put{ border: 2px solid var(--orange); }
+.endpoint-head .method.post{ border: 2px solid var(--green); }
+.endpoint-head .method.get{ border: 2px solid var(--blue); }
+.endpoint-head .method.get.deprecated{ border: 2px solid var(--border-color); }
+.endpoint-head .method.head,
+.endpoint-head .method.patch,
+.endpoint-head .method.options { 
   border: 2px solid var(--yellow); 
 }
 

package/src/styles/font-styles.js

@@ -40,7 +40,7 @@ export default css`
   .blue-text {color: var(--blue)}
   .multiline {
     overflow: scroll;
-    max-height: var(--resp-area-height, 300px);
+    max-height: var(--resp-area-height, 400px);
     color: var(--fg3);  
   }
   .method-fg.put { color: var(--orange); }

package/src/styles/nav-styles.js

@@ -52,7 +52,8 @@ export default css`
   height:16px;
   text-align: center;
   display: inline-block;
-  transform: rotate(270deg);
+  transform: rotate(-90deg);
+  transition: transform 0.2s ease-out 0s;
 }
 .nav-bar.focused .nav-bar-tag-and-paths.expanded .nav-bar-tag-icon::after {
   content: '⌵';
@@ -60,6 +61,7 @@ export default css`
   height:16px;
   text-align: center;
   display: inline-block;
+  transition: transform 0.2s ease-out 0s;
 }
 .nav-scroll::-webkit-scrollbar {
   width: var(--scroll-bar-width, 8px);

package/src/styles/schema-styles.js

@@ -21,10 +21,12 @@ export default css`
   word-break: break-all;
 }
 
-.collapsed-descr .key{
+.collapsed-descr .key {
   overflow:hidden;
 }
 
+.expanded-descr .more-content { display:none; }
+
 .key-descr {
   font-family:var(--font-regular);
   color:var(--light-fg);

package/src/styles/tab-styles.js

@@ -41,5 +41,6 @@ export default css`
 .tab-content {
   margin:-1px 0 0 0;
   position:relative;
+  min-height: 50px;
 }
 `;

package/src/templates/callback-template.js

@@ -9,7 +9,7 @@ export default function callbackTemplate(callbacks) {
         ${kv[0]}
         ${Object.entries(kv[1]).map((pathObj) => html`
           <div class="mono-font small-font-size" style="display:flex; margin-left:16px;">
-            <div> 
+            <div style="width:100%"> 
               ${Object.entries(pathObj[1]).map((method) => html`
                 <div>
                   <div style="margin-top:12px;">
@@ -36,11 +36,12 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-                      schema-hide-read-only = "${this.schemaHideReadOnly}"
+                      schema-hide-read-only = "false"
+                      schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
                       fetch-credentials = "${this.fetchCredentials}"
                       exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
                         file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
-                        anchor:anchor, anchor-param-example:anchor-param-example"
+                        anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
                     > </api-request>
 
                     <api-response
@@ -54,7 +55,10 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-                      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-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"
                     > </api-response>
                   </div>
                 </div>  

package/src/templates/components-template.js

@@ -21,6 +21,7 @@ function schemaBodyTemplate(sComponent) {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
+        exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
       > </schema-tree> `
     : html`
       <schema-tree
@@ -31,6 +32,7 @@ function schemaBodyTemplate(sComponent) {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
+        exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
       > </schema-tree>`
 }
   </div>`;