openapi-explorer 2.2.770 → 2.2.772

package/dist/es/components/api-request.js

@@ -30,7 +30,7 @@ export default class ApiRequest extends LitElement {
     this.curlSyntax = '';
     this.activeResponseTab = 'curl'; // allowed values: response, headers, curl
     this.selectedRequestBodyType = '';
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
   }
   static get properties() {
     return {
@@ -143,13 +143,11 @@ export default class ApiRequest extends LitElement {
       },
       // internal tracking of response-tab not exposed as a attribute
       selectedRequestBodyType: {
-        type: String,
-        attribute: 'selected-request-body-type'
+        type: String
       },
       // internal tracking of selected request-body type
-      selectedRequestBodyExample: {
-        type: String,
-        attribute: 'selected-request-body-example'
+      selectedRequestBodyExampleId: {
+        type: String
       },
       // internal tracking of selected request-body example
       curlSyntax: {
@@ -317,17 +315,17 @@ export default class ApiRequest extends LitElement {
   }
   resetRequestBodySelection() {
     this.selectedRequestBodyType = '';
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
     this.computeCurlSyntax();
     this.clearResponseData();
   }
 
   // Request-Body Event Handlers
   onSelectExample(e) {
-    this.selectedRequestBodyExample = e.target.value;
+    this.selectedRequestBodyExampleId = e.target.value;
     const exampleDropdownEl = e.target;
     window.setTimeout(selectEl => {
-      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector(`.request-body-param[data-example="${this.selectedRequestBodyExample}"`);
+      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector(`.request-body-param[data-example="${this.selectedRequestBodyExampleId}"`);
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = exampleTextareaEl.value;
       this.computeCurlSyntax();
@@ -336,7 +334,7 @@ export default class ApiRequest extends LitElement {
   onMimeTypeChange(e) {
     this.selectedRequestBodyType = e.target.value;
     const mimeDropdownEl = e.target;
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
     window.setTimeout(selectEl => {
       const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');
       if (exampleTextareaEl) {
@@ -387,11 +385,11 @@ export default class ApiRequest extends LitElement {
     // Generate Example
     if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
       const reqBodyExamples = generateExample(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
-      if (!this.selectedRequestBodyExample) {
-        this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
+      if (!this.selectedRequestBodyExampleId) {
+        this.selectedRequestBodyExampleId = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
       }
-      const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
-      reqBodyDefaultHtml = html` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : html` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(toMarkdown(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
+      const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExampleId) || reqBodyExamples[0];
+      reqBodyDefaultHtml = html` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : html` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExampleId}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(toMarkdown(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
         this.computeCurlSyntax();
       }}" class="textarea request-body-param-user-input" part="textarea textarea-param" aria-label="${getI18nText('operations.request-body')}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> </div>` : ''} ${reqBodyExamples.map(bodyExample => html` <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" data-example="${bodyExample.exampleId}" style="width:100%;resize:vertical;display:none" .value="${bodyExample.exampleFormat === 'text' ? bodyExample.exampleValue : JSON.stringify(bodyExample.exampleValue, null, 8)}"></textarea> `)} </div> `;
     } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
@@ -417,14 +415,15 @@ export default class ApiRequest extends LitElement {
     }
 
     // When the content type and the element stay the same, then don't change the updated body.
-    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId) {
+    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId && this.selectedRequestBodyExampleId === this.cachedBodyData.exampleId) {
       reqBodyDefaultHtml = this.cachedBodyData.body;
     } else {
       // Otherwise use the recalculated body and cache that
       this.cachedBodyData = {
         body: reqBodyDefaultHtml,
         contentType: this.selectedRequestBodyType,
-        elementId: this.elementId
+        elementId: this.elementId,
+        exampleId: this.selectedRequestBodyExampleId
       };
     }
     return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(toMarkdown(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? html` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" role="group" @click="${e => {
@@ -449,7 +448,7 @@ export default class ApiRequest extends LitElement {
   // }
 
   apiResponseTabTemplate() {
-    const curlSyntax = this.curlSyntax || this.computeCurlSyntax() || '';
+    const curlSyntax = this.curlSyntax || '';
     const hasResponse = this.responseMessage !== '';
     return html` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? html`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> ${!hasResponse ? '' : html`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">${getI18nText('operations.clear-response')}</button>`} </div> <div class="tab-panel col" style="border-width:0 0 1px 0"> <div id="tab_buttons" class="tab-buttons row" @click="${e => {
       if (e.target.classList.contains('tab-btn') === false) {

package/dist/es/templates/navbar-template.js

@@ -5,6 +5,11 @@ import { getI18nText } from '../languages/index.js';
 import { expandCollapseComponent } from './endpoint-template.js';
 import { getComponentInfo } from './components-template.js';
 function onExpandCollapseTag(event, tagId) {
+  if (tagId === 'link-overview') {
+    this.resolvedSpec.info.expanded = !this.resolvedSpec.info.expanded;
+    this.scrollToEventTarget(event, false);
+    return;
+  }
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
   if (!tag) {
     return;
@@ -12,6 +17,7 @@ function onExpandCollapseTag(event, tagId) {
   tag.expanded = !tag.expanded;
   if (tag.expanded && this.operationsCollapsed) {
     this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
+    this.resolvedSpec.info.expanded = false;
   }
 
   // Only display the dedicated tag page if the tag has a description, otherwise, it will be an ugly page with nothing on it.
@@ -39,12 +45,14 @@ export function expandCollapseAllComponents() {
 
 /* eslint-disable indent */
 export default function navbarTemplate() {
-  var _this$resolvedSpec$co;
-  return html` <nav class="nav-bar ${this.renderStyle}" part="section-navbar" aria-label="${getI18nText('menu.menu')}"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : html` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${getI18nText('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${getI18nText('menu.search')} </button> </div> `} ${html`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : html`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
+  var _this$resolvedSpec$in, _this$resolvedSpec$co;
+  return html` <nav class="nav-bar ${this.renderStyle}" part="section-navbar" aria-label="${getI18nText('menu.menu')}"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : html` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${getI18nText('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${getI18nText('menu.search')} </button> </div> `} ${html`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : html` <div class="nav-bar-tag-and-paths ${this.resolvedSpec.info.expanded ? '' : 'collapsed'}"> <div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => {
+    onExpandCollapseTag.call(this, e, 'link-overview');
+  }}" role="link" tabindex="0" @keydown="${e => {
     if (e.key === 'Enter') {
       e.target.click();
     }
-  }}" ; }> ${this.resolvedSpec.info.title || getI18nText('menu.overview')} </div>`} ${this.hideServerSelection ? '' : html`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
+  }}" ; }> ${this.resolvedSpec.info.title || getI18nText('menu.overview')} </div> <div class="nav-bar-section-wrapper"> <div> ${((_this$resolvedSpec$in = this.resolvedSpec.info.headers) === null || _this$resolvedSpec$in === void 0 ? void 0 : _this$resolvedSpec$in.map(header => html` <div class="nav-bar-h${header.depth}" id="link-overview--${new marked.Slugger().slug(header.text)}" data-content-id="overview--${new marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)) || ''} </div> </div> </div> `} ${this.hideServerSelection ? '' : html`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
     if (e.key === 'Enter') {
       e.target.click();
     }

package/dist/es/utils/spec-parser.js

@@ -110,8 +110,11 @@ export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
     }];
   }
   const parsedSpec = {
-    info: jsonParsedSpec.info,
-    infoDescriptionHeaders,
+    info: {
+      ...jsonParsedSpec.info,
+      expanded: true,
+      headers: infoDescriptionHeaders
+    },
     tags,
     components,
     // pathGroups,

package/dist/lib/components/api-request.js

@@ -35,7 +35,7 @@ class ApiRequest extends _lit.LitElement {
     this.curlSyntax = '';
     this.activeResponseTab = 'curl'; // allowed values: response, headers, curl
     this.selectedRequestBodyType = '';
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
   }
   static get properties() {
     return {
@@ -148,13 +148,11 @@ class ApiRequest extends _lit.LitElement {
       },
       // internal tracking of response-tab not exposed as a attribute
       selectedRequestBodyType: {
-        type: String,
-        attribute: 'selected-request-body-type'
+        type: String
       },
       // internal tracking of selected request-body type
-      selectedRequestBodyExample: {
-        type: String,
-        attribute: 'selected-request-body-example'
+      selectedRequestBodyExampleId: {
+        type: String
       },
       // internal tracking of selected request-body example
       curlSyntax: {
@@ -322,17 +320,17 @@ class ApiRequest extends _lit.LitElement {
   }
   resetRequestBodySelection() {
     this.selectedRequestBodyType = '';
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
     this.computeCurlSyntax();
     this.clearResponseData();
   }
 
   // Request-Body Event Handlers
   onSelectExample(e) {
-    this.selectedRequestBodyExample = e.target.value;
+    this.selectedRequestBodyExampleId = e.target.value;
     const exampleDropdownEl = e.target;
     window.setTimeout(selectEl => {
-      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector(`.request-body-param[data-example="${this.selectedRequestBodyExample}"`);
+      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector(`.request-body-param[data-example="${this.selectedRequestBodyExampleId}"`);
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = exampleTextareaEl.value;
       this.computeCurlSyntax();
@@ -341,7 +339,7 @@ class ApiRequest extends _lit.LitElement {
   onMimeTypeChange(e) {
     this.selectedRequestBodyType = e.target.value;
     const mimeDropdownEl = e.target;
-    this.selectedRequestBodyExample = '';
+    this.selectedRequestBodyExampleId = '';
     window.setTimeout(selectEl => {
       const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');
       if (exampleTextareaEl) {
@@ -392,11 +390,11 @@ class ApiRequest extends _lit.LitElement {
     // Generate Example
     if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
       const reqBodyExamples = (0, _schemaUtils.generateExample)(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
-      if (!this.selectedRequestBodyExample) {
-        this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
+      if (!this.selectedRequestBodyExampleId) {
+        this.selectedRequestBodyExampleId = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
       }
-      const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
-      reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.html)` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? (0, _lit.html)` <div class="example"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
+      const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExampleId) || reqBodyExamples[0];
+      reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.html)` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExampleId}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? (0, _lit.html)` <div class="example"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
         this.computeCurlSyntax();
       }}" class="textarea request-body-param-user-input" part="textarea textarea-param" aria-label="${(0, _index.getI18nText)('operations.request-body')}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> </div>` : ''} ${reqBodyExamples.map(bodyExample => (0, _lit.html)` <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" data-example="${bodyExample.exampleId}" style="width:100%;resize:vertical;display:none" .value="${bodyExample.exampleFormat === 'text' ? bodyExample.exampleValue : JSON.stringify(bodyExample.exampleValue, null, 8)}"></textarea> `)} </div> `;
     } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
@@ -422,14 +420,15 @@ class ApiRequest extends _lit.LitElement {
     }
 
     // When the content type and the element stay the same, then don't change the updated body.
-    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId) {
+    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId && this.selectedRequestBodyExampleId === this.cachedBodyData.exampleId) {
       reqBodyDefaultHtml = this.cachedBodyData.body;
     } else {
       // Otherwise use the recalculated body and cache that
       this.cachedBodyData = {
         body: reqBodyDefaultHtml,
         contentType: this.selectedRequestBodyType,
-        elementId: this.elementId
+        elementId: this.elementId,
+        exampleId: this.selectedRequestBodyExampleId
       };
     }
     return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" role="group" @click="${e => {
@@ -454,7 +453,7 @@ class ApiRequest extends _lit.LitElement {
   // }
 
   apiResponseTabTemplate() {
-    const curlSyntax = this.curlSyntax || this.computeCurlSyntax() || '';
+    const curlSyntax = this.curlSyntax || '';
     const hasResponse = this.responseMessage !== '';
     return (0, _lit.html)` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? (0, _lit.html)`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? (0, _lit.html)`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> ${!hasResponse ? '' : (0, _lit.html)`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">${(0, _index.getI18nText)('operations.clear-response')}</button>`} </div> <div class="tab-panel col" style="border-width:0 0 1px 0"> <div id="tab_buttons" class="tab-buttons row" @click="${e => {
       if (e.target.classList.contains('tab-btn') === false) {

package/dist/lib/templates/navbar-template.js

@@ -11,6 +11,11 @@ var _index = require("../languages/index.js");
 var _endpointTemplate = require("./endpoint-template.js");
 var _componentsTemplate = require("./components-template.js");
 function onExpandCollapseTag(event, tagId) {
+  if (tagId === 'link-overview') {
+    this.resolvedSpec.info.expanded = !this.resolvedSpec.info.expanded;
+    this.scrollToEventTarget(event, false);
+    return;
+  }
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
   if (!tag) {
     return;
@@ -18,6 +23,7 @@ function onExpandCollapseTag(event, tagId) {
   tag.expanded = !tag.expanded;
   if (tag.expanded && this.operationsCollapsed) {
     this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
+    this.resolvedSpec.info.expanded = false;
   }
 
   // Only display the dedicated tag page if the tag has a description, otherwise, it will be an ugly page with nothing on it.
@@ -45,12 +51,14 @@ function expandCollapseAllComponents() {
 
 /* eslint-disable indent */
 function navbarTemplate() {
-  var _this$resolvedSpec$co;
-  return (0, _lit.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar" aria-label="${(0, _index.getI18nText)('menu.menu')}"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : (0, _lit.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${(0, _index.getI18nText)('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${(0, _index.getI18nText)('menu.search')} </button> </div> `} ${(0, _lit.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
+  var _this$resolvedSpec$in, _this$resolvedSpec$co;
+  return (0, _lit.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar" aria-label="${(0, _index.getI18nText)('menu.menu')}"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : (0, _lit.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${(0, _index.getI18nText)('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${(0, _index.getI18nText)('menu.search')} </button> </div> `} ${(0, _lit.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : (0, _lit.html)` <div class="nav-bar-tag-and-paths ${this.resolvedSpec.info.expanded ? '' : 'collapsed'}"> <div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => {
+    onExpandCollapseTag.call(this, e, 'link-overview');
+  }}" role="link" tabindex="0" @keydown="${e => {
     if (e.key === 'Enter') {
       e.target.click();
     }
-  }}" ; }> ${this.resolvedSpec.info.title || (0, _index.getI18nText)('menu.overview')} </div>`} ${this.hideServerSelection ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
+  }}" ; }> ${this.resolvedSpec.info.title || (0, _index.getI18nText)('menu.overview')} </div> <div class="nav-bar-section-wrapper"> <div> ${((_this$resolvedSpec$in = this.resolvedSpec.info.headers) === null || _this$resolvedSpec$in === void 0 ? void 0 : _this$resolvedSpec$in.map(header => (0, _lit.html)` <div class="nav-bar-h${header.depth}" id="link-overview--${new _marked.marked.Slugger().slug(header.text)}" data-content-id="overview--${new _marked.marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)) || ''} </div> </div> </div> `} ${this.hideServerSelection ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
     if (e.key === 'Enter') {
       e.target.click();
     }

package/dist/lib/utils/spec-parser.js

@@ -116,8 +116,11 @@ async function ProcessSpec(specUrlOrObject, serverUrl = '') {
     }];
   }
   const parsedSpec = {
-    info: jsonParsedSpec.info,
-    infoDescriptionHeaders,
+    info: {
+      ...jsonParsedSpec.info,
+      expanded: true,
+      headers: infoDescriptionHeaders
+    },
     tags,
     components,
     // pathGroups,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "2.2.770",
+  "version": "2.2.772",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Authress Developers <developers@authress.io>",
   "type": "module",