rapidoc 9.3.2 → 9.3.4

package/src/styles/schema-styles.js

@@ -10,6 +10,7 @@ export default css`
   width: 100%;
   box-sizing: content-box;
   border-bottom: 1px dotted transparent;
+  transition: max-height 0.3s ease-out;
 }
 .td {
   display: block;
@@ -21,9 +22,29 @@ export default css`
   word-break: break-all;
 }
 
-.collapsed-descr .key {
+.collapsed-all-descr .key {
   overflow:hidden;
 }
+.expanded-all-descr .key-descr .descr-expand-toggle {
+  display:none;
+}
+
+.key-descr .descr-expand-toggle {
+  display:inline-block;
+  user-select:none;
+  color: var(--fg);
+  cursor: pointer;
+  transform: rotate(45deg);
+  transition: transform .2s ease;
+}
+
+.expanded-descr .key-descr .descr-expand-toggle {
+  transform: rotate(270deg)
+}
+
+.key-descr .descr-expand-toggle:hover {
+  color: var(--primary-color);
+}
 
 .expanded-descr .more-content { display:none; }
 
@@ -40,13 +61,6 @@ export default css`
   overflow:hidden;
   display: none;
 }
-.collapsed-descr .tr {
-  max-height:20px;
-}
-
-.tr.xxx-of{
-  border-top: 1px dotted var(--primary-color);
-}
 
 .xxx-of-key {
   font-size: calc(var(--font-size-small) - 2px); 
@@ -61,10 +75,10 @@ export default css`
 }
 
 .xxx-of-descr {
-    font-family: var(--font-regular);
-    color: var(--primary-color);
-    font-size: calc(var(--font-size-small) - 1px);
-    margin-left: 2px;
+  font-family: var(--font-regular);
+  color: var(--primary-color);
+  font-size: calc(var(--font-size-small) - 1px);
+  margin-left: 2px;
 }
 
 .stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host {color:var(--green);}
@@ -72,6 +86,7 @@ export default css`
 .null {color:var(--red);}
 .bool, .boolean{color:var(--orange)}
 .enum {color:var(--purple)}
+.cons {color:var(--purple)}
 .recu {color:var(--brown)}
 .toolbar {
   display:flex;
@@ -90,9 +105,6 @@ export default css`
   font-weight: bold;
   text-transform: uppercase;
 }
-.schema-root-type.xxx-of {
-  display:none;
-}
 .toolbar-item:first-of-type { margin:0 2px 0 0;}
 
 @media only screen and (min-width: 500px) {

package/src/styles/tab-styles.js

@@ -6,6 +6,7 @@ export default css`
 }
 .tab-buttons {
   height:30px;
+  padding: 4px 4px 0 4px;
   border-bottom: 1px solid var(--light-border-color) ;
   align-items: stretch;
   overflow-y: hidden;

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;">
@@ -29,21 +29,20 @@ export default function callbackTemplate(callbacks) {
                       .parameters = "${method[1]?.parameters || ''}" 
                       .request_body = "${method[1]?.requestBody || ''}"
                       fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-                      use-summary-to-list-example = "${this.useSummaryToListExamples}"
                       allow-try = "false"
                       render-style="${this.renderStyle}" 
                       schema-style = "${this.schemaStyle}"
                       active-schema-tab = "${this.defaultSchemaTab}"
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                      allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                      allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                       schema-hide-read-only = "false"
-                      schema-hide-write-only = "${this.schemaHideWriteOnly}"
+                      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,
+                      exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
                         file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
                         anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-                    > </api-request>
+                      > </api-request>
 
                     <api-response
                       style = "width:100%;"
@@ -56,7 +55,7 @@ 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 = "${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"

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

@@ -28,6 +28,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
         <pre><code class="language">${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(v.source, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : v.source}</code></pre>
       </div>`)
     }
+  </div>  
   </section>`;
 }
 /* eslint-enable indent */

package/src/templates/components-template.js

@@ -14,22 +14,20 @@ function schemaBodyTemplate(sComponent) {
   ${this.schemaStyle === 'table'
     ? html`
       <schema-table
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        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> `
+      > </schema-table>`
     : html`
       <schema-tree
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        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"

package/src/templates/endpoint-template.js

@@ -12,14 +12,14 @@ function toggleExpand(path) {
   if (path.expanded) {
     path.expanded = false; // collapse
     if (this.updateRoute === 'true') {
-      window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix === '#' ? '' : `${this.routePrefix}`}`);
+      this.replaceHistoryState('');
     }
   } else {
     path.expanded = true; // Expand
     if (this.updateRoute === 'true') {
       const newHash = `${this.routePrefix || '#'}${path.elementId}`;
       if (window.location.hash !== newHash) {
-        window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${newHash}`);
+        this.replaceHistoryState(path.elementId);
       }
     }
   }
@@ -109,6 +109,18 @@ function endpointBodyTemplate(path) {
       }
 
       ${path.description ? html`<div part="section-endpoint-body-description" class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${path.externalDocs?.url || path.externalDocs?.description
+        ? html`<div style="background-color:var(--bg3); padding:2px 8px 8px 8px; margin:8px 0; border-radius:var(--border-radius)"> 
+            <div class="m-markdown"> ${unsafeHTML(marked(path.externalDocs?.description || ''))} </div>
+            ${path.externalDocs?.url
+              ? html`<a style="font-family:var(--font-mono); font-size:var(--font-size-small)" href="${path.externalDocs?.url}" target="_blank"> 
+                  ${path.externalDocs?.url} <div style="transform: rotate(270deg) scale(1.5); display: inline-block; margin-left:5px">⇲</div>
+                </a>`
+              : ''
+            }
+          </div>`
+        : ''
+      }
       <slot name="${path.elementId}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
       ${codeSampleTabPanel}
@@ -118,7 +130,8 @@ function endpointBodyTemplate(path) {
         <api-request
           class = "${this.renderStyle}-mode ${this.layout}-layout"
           style = "width:100%;"
-          method = "${path.method}", 
+          webhook = "${path.isWebhook}"
+          method = "${path.method}"
           path = "${path.path}"
           .security = "${path.security}"
           .parameters = "${path.parameters}"
@@ -128,43 +141,44 @@ function endpointBodyTemplate(path) {
           server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
           active-schema-tab = "${this.defaultSchemaTab}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-          use-summary-to-list-example = "${this.useSummaryToListExamples}"
           allow-try = "${this.allowTry}"
+          show-curl-before-try = "${this.showCurlBeforeTry}"
           accept = "${accept}"
           render-style="${this.renderStyle}" 
           schema-style = "${this.schemaStyle}" 
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-description-expanded = "${this.schemaDescriptionExpanded}"
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${path.isWebhook ? this.schemaHideWriteOnly : this.schemaHideReadOnly}"
-          schema-hide-write-only = "${path.isWebhook ? this.schemaHideReadOnly : this.schemaHideWriteOnly}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           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,
+          exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
             file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
             anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-        > </api-request>
+          > </api-request>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
-      </div>  
+        </div>  
 
-      <api-response
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        .responses="${path.responses}"
-        active-schema-tab = "${this.defaultSchemaTab}" 
-        render-style="${this.renderStyle}" 
-        schema-style="${this.schemaStyle}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-read-only = "${path.isWebhook ? this.schemaHideWriteOnly : this.schemaHideReadOnly}"
-        schema-hide-write-only = "${path.isWebhook ? this.schemaHideReadOnly : this.schemaHideWriteOnly}"
-        selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
-        textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
-        schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </api-response>
-    </div>
+        <api-response
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          webhook = "${path.isWebhook}"
+          .responses="${path.responses}"
+          active-schema-tab = "${this.defaultSchemaTab}" 
+          render-style="${this.renderStyle}" 
+          schema-style="${this.schemaStyle}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
+          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
+          textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
+          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-response>
+      </div>
   </div>`;
 }
 

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

@@ -15,7 +15,24 @@ function headingRenderer(tagElementId) {
   return renderer;
 }
 
-export function expandedEndpointBodyTemplate(path, tagName = '') {
+function expandCollapseTagDescription(e) {
+  const tagDescriptionEl = e.target.closest('.tag-container').querySelector('.tag-description');
+  const tagIconEl = e.target.closest('.tag-container').querySelector('.tag-icon');
+  if (tagDescriptionEl && tagIconEl) {
+    const isExpanded = tagDescriptionEl.classList.contains('expanded');
+    if (isExpanded) {
+      tagDescriptionEl.style.maxHeight = 0;
+      tagDescriptionEl.classList.replace('expanded', 'collapsed');
+      tagIconEl.classList.replace('expanded', 'collapsed');
+    } else {
+      tagDescriptionEl.style.maxHeight = `${tagDescriptionEl.scrollHeight}px`;
+      tagDescriptionEl.classList.replace('collapsed', 'expanded');
+      tagIconEl.classList.replace('collapsed', 'expanded');
+    }
+  }
+}
+
+export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription = '') {
   const acceptContentTypes = new Set();
   for (const respStatus in path.responses) {
     for (const acceptContentType in (path.responses[respStatus]?.content)) {
@@ -37,7 +54,26 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
   return html`
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
-      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
+      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂')
+        ? html`
+          <div class="tag-container" part="section-operation-tag"> 
+            <span class="upper" style="font-weight:bold; font-size:18px;"> ${tagName} </span>
+            ${tagDescription
+              ? html`
+                <svg class="tag-icon collapsed" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" fill="none" style="stroke:var(--primary-color); vertical-align:top; cursor:pointer"
+                @click="${(e) => { expandCollapseTagDescription.call(this, e); }}"
+                >
+                  <path d="M12 20h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8"></path><path d="M18 4v17"></path><path d="M15 18l3 3l3 -3"></path>
+                </svg>
+                <div class="tag-description collapsed" style="max-height:0px; overflow:hidden; margin-top:16px; border:1px solid var(--border-color)"> 
+                  <div class="m-markdown" style="padding:8px"> ${unsafeHTML(marked(tagDescription))}</div>  
+                </div>`
+              : ''
+            }  
+          </div>
+        `
+        : ''
+      }
       ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
       ${html`
         ${path.xBadges && path.xBadges?.length > 0
@@ -53,10 +89,10 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         }
         <h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
         ${path.isWebhook
-          ? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
+          ? html`<span part="section-operation-webhook" style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
           : html`
-            <div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
-              <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
+            <div part="section-operation-webhook-method" class="mono-font regular-font-size" style="text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)"> 
+              <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> 
               <span part="label-operation-path">${path.path}</span>
             </div>
           `
@@ -65,11 +101,24 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
       }
       ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
       ${pathSecurityTemplate.call(this, path.security)}
+      ${path.externalDocs?.url || path.externalDocs?.description
+        ? html`<div style="background-color:var(--bg3); padding:2px 8px 8px 8px; margin:8px 0; border-radius:var(--border-radius)"> 
+            <div class="m-markdown"> ${unsafeHTML(marked(path.externalDocs?.description || ''))} </div>
+            ${path.externalDocs?.url
+              ? html`<a style="font-family:var(--font-mono); font-size:var(--font-size-small)" href="${path.externalDocs?.url}" target="_blank">
+                  ${path.externalDocs?.url} <div style="transform: rotate(270deg) scale(1.5); display: inline-block; margin-left:5px">⇲</div>
+                </a>`
+              : ''
+            }
+          </div>`
+        : ''
+      }
       ${codeSampleTabPanel}
       <div class='expanded-req-resp-container'>
         <api-request
           class = "${this.renderStyle}-mode"
           style = "width:100%;"
+          webhook = "${path.isWebhook}"
           method = "${path.method}"
           path = "${path.path}"
           .security = "${path.security}"
@@ -79,8 +128,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           .servers = "${path.servers}"
           server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-          use-summary-to-list-example = "${this.useSummaryToListExamples}"
           allow-try = "${this.allowTry}"
+          show-curl-before-try = "${this.showCurlBeforeTry}"
           accept = "${accept}"
           render-style="${this.renderStyle}" 
           schema-style = "${this.schemaStyle}"
@@ -88,10 +137,10 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-description-expanded = "${this.schemaDescriptionExpanded}"
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
-          schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           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,
+          exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
             file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
             anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
         > </api-request>
@@ -101,6 +150,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         <api-response
           class = "${this.renderStyle}-mode"
           style = "width:100%;"
+          webhook = "${path.isWebhook}"
           .responses = "${path.responses}"
           render-style = "${this.renderStyle}"
           schema-style = "${this.schemaStyle}"
@@ -108,8 +158,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-description-expanded = "${this.schemaDescriptionExpanded}"
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
-          schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
           selected-status = "${Object.keys(path.responses || {})[0] || ''}"
           exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
           schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -135,8 +185,8 @@ export default function expandedEndpointTemplate() {
       }
       </div>
     </section>
-    <section class='regular-font section-gap--read-mode' part="section-operations-in-tag">
-      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path, 'BBB'))}
+    <section class="regular-font section-gap--read-mode" part="section-operations-in-tag">
+      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path))}
     </section>
     `)
   }

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

@@ -96,7 +96,10 @@ export default function focusedEndpointTemplate() {
       // In focused mode we must expand the nav-bar tag element if it is collapsed
       const newNavEl = this.shadowRoot.getElementById(`link-${focusElId}`);
       expandCollapseNavBarTag(newNavEl, 'expand');
-      focusedTemplate = wrapFocusedTemplate.call(this, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name));
+      focusedTemplate = wrapFocusedTemplate.call(
+        this,
+        expandedEndpointBodyTemplate.call(this, selectedPathObj, (selectedTagObj.name || ''), (selectedTagObj.description || '')),
+      );
     } else {
       // if focusedElementId is not found then show the default content (overview or first-path)
       focusedTemplate = defaultContentTemplate.call(this);

package/src/templates/header-template.js

@@ -23,7 +23,7 @@ export default function headerTemplate() {
             part="textbox textbox-spec-url" 
             placeholder="Spec URL" 
             value="${this.specUrl || ''}" 
-            @change="${this.onSepcUrlChange}" 
+            @change="${this.onSpecUrlChange}" 
             spellcheck="false"
           >
           <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div> 
@@ -37,7 +37,7 @@ export default function headerTemplate() {
             type="file" 
             style="display:none" 
             value="${this.specFile || ''}" 
-            @change="${this.onSepcFileChange}" 
+            @change="${this.onSpecFileChange}" 
             spellcheck="false"
            >
           <button class="m-btn primary only-large-screen" style="margin-left:10px;" part="btn btn-fill" @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>

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

@@ -63,7 +63,7 @@ function jsonSchemaBodyTemplate() {
                 .data = "${schemaInObjectNotation(jSchemaBody.schema, {})}"
                 schema-expand-level = "${this.schemaExpandLevel}"
                 schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                 schema-hide-read-only = "false"
                 schema-hide-write-only = "false"
               > </schema-tree>
@@ -113,6 +113,7 @@ export default function jsonSchemaViewerTemplate(isMini = false) {
     navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
     navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
+    navAccenttextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
   };
   /* eslint-disable indent */
   if (this.resolvedSpec.specLoadError) {

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

@@ -30,24 +30,25 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
     navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
+    navAccentTextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
   };
   /* eslint-disable indent */
   if (this.resolvedSpec.specLoadError) {
     if (isMini) {
       return html`
         ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-        <div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+        <div style='display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
       `;
     }
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
       <!-- Header -->
       ${headerTemplate.call(this)}
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' part='section-main-content'>
         <slot></slot>
-        <div style="margin:24px; text-align: center;">
-          <h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
-          <div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+        <div style='margin:24px; text-align: center;'>
+          <h1 style='color: var(--red)'> ${this.resolvedSpec.info.title} </h1>
+          <div style='font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
         </div>
       </main>  
     `;
@@ -55,12 +56,12 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
   if (this.resolvedSpec.isSpecLoading) {
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' part='section-main-content'>
         <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
-          <div class="loader"></div>
+        <div class='main-content-inner--${this.renderStyle}-mode'>
+          <div class='loader'></div>
         </div>
-      </main>  
+      </main>
     `;
   }
 
@@ -73,7 +74,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     <!-- Advanced Search -->
     ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
 
-    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection} >
+    <div id='the-main-body' class='body ${this.cssClasses}' dir='${this.pageDirection}' >
       <!-- Side Nav -->
       ${((this.renderStyle === 'read' || this.renderStyle === 'focused')
           && this.showSideNav === 'true'
@@ -82,24 +83,24 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
       }
 
       <!-- Main Content -->
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' tabindex='-1' part='section-main-content'>
         <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
+        <div class='main-content-inner--${this.renderStyle}-mode'>
           ${this.loading === true
-            ? html`<div class="loader"></div>`
+            ? html`<div class='loader'></div>`
             : html`
               ${this.loadFailed === true
-                ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`
+                ? html`<div style='text-align: center;margin: 16px;'> Unable to load the Spec</div>`
                 : html`
-                  <div class="operations-root" @click="${(e) => { this.handleHref(e); }}">
+                  <div class='operations-root' @click='${(e) => { this.handleHref(e); }}'>
                   ${this.renderStyle === 'focused'
                     ? html`${focusedEndpointTemplate.call(this)}`
                     : html`
                       ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
                       ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
                       ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
-                      <div id="operations-top" class="observe-me">
-                        <slot name="operations-top"></slot>
+                      <div id='operations-top' class='observe-me'>
+                        <slot name='operations-top'></slot>
                       </div>  
                       ${this.renderStyle === 'read'
                         ? expandedEndpointTemplate.call(this)
@@ -112,7 +113,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
               }`
           }
         </div>
-        <slot name="footer"></slot>
+        <slot name='footer'></slot>
       </main>
     </div>  
   `;