rapidoc 9.1.8 → 9.3.2

package/src/components/schema-table.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } 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';
 import FontStyles from '~/styles/font-styles';
 import SchemaStyles from '~/styles/schema-styles';
 import CustomStyles from '~/styles/custom-styles';
@@ -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>`;
     }
@@ -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`
-              ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+              ${['::title', '::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],
@@ -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(schemaDescription))}</span>` : ''}
         </div>
       </div>
     `;

package/src/components/schema-tree.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } 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';
 import FontStyles from '~/styles/font-styles';
 import SchemaStyles from '~/styles/schema-styles';
 import BorderStyles from '~/styles/border-styles';
@@ -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`
-                ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+                ${['::title', '::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],
@@ -263,7 +282,7 @@ export default class SchemaTree extends LitElement {
     }
 
     // For Primitive types and array of Primitives
-    const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, , deprecated] = data.split('~|~');
+    const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
     if (primitiveReadOrWrite === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
     }
@@ -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(schemaDescription))}</span>` : ''}
         </div>
       </div>
     `;

package/src/components/tag-input.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class TagInput extends LitElement {
   /* eslint-disable indent */

package/src/json-schema-viewer.js

@@ -1,4 +1,4 @@
-import { css, LitElement } from 'lit-element';
+import { css, LitElement } from 'lit';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
@@ -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%;

package/src/rapidoc-mini.js

@@ -1,4 +1,4 @@
-import { css, LitElement } from 'lit-element';
+import { css, LitElement } from 'lit';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
@@ -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() {
@@ -49,6 +51,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' },
+      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       persistAuth: { type: String, attribute: 'persist-auth' },
 
       // Schema Styles
@@ -159,7 +162,7 @@ export default class RapiDocMini extends LitElement {
       this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
     }
     if (!this.defaultSchemaTab || !'example, schema, model,'.includes(`${this.defaultSchemaTab},`)) {
-      this.defaultSchemaTab = 'schema';
+      this.defaultSchemaTab = 'example';
     } else if (this.defaultSchemaTab === 'model') {
       this.defaultSchemaTab = 'schema';
     }
@@ -167,6 +170,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.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }
     if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
 
@@ -301,6 +305,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

@@ -1,4 +1,4 @@
-import { css, LitElement, unsafeCSS } from 'lit-element';
+import { css, LitElement, unsafeCSS } from 'lit';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
@@ -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' },
+      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       persistAuth: { type: String, attribute: 'persist-auth' },
       onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
@@ -107,6 +108,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 +118,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 +254,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 +331,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;
@@ -417,7 +445,7 @@ export default class RapiDoc extends LitElement {
       this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
     }
     if (!this.defaultSchemaTab || !'example, schema, model,'.includes(`${this.defaultSchemaTab},`)) {
-      this.defaultSchemaTab = 'schema';
+      this.defaultSchemaTab = 'example';
     } else if (this.defaultSchemaTab === 'model') {
       this.defaultSchemaTab = 'schema';
     }
@@ -435,6 +463,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.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }
     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) {
@@ -456,6 +485,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 +502,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 +537,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);
   }
 

package/src/styles/border-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .border-top {

package/src/styles/custom-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /*
 This file is reserved for any custom css that developers want to add to

package/src/styles/dialog-box-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   *, *:before, *:after { box-sizing: border-box; }

package/src/styles/endpoint-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .only-large-screen { display:none; }
@@ -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/flex-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .row, .col{

package/src/styles/font-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .hover-bg:hover{

package/src/styles/info-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 #api-info {

package/src/styles/input-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* eslint-disable max-len */
 export default css`

package/src/styles/nav-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .nav-bar {
@@ -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/prism-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 code[class*="language-"],

package/src/styles/schema-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 
@@ -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);