openapi-explorer 2.2.771 → 2.2.773

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/openapi-explorer.js

@@ -630,10 +630,11 @@ export default class OpenApiExplorer extends LitElement {
 
     // explorerLocation will get validated in the focused-endpoint-template
     this.explorerLocation = elementId;
-    const tag = this.resolvedSpec.tags.find(t => t.paths.some(p => p.elementId === elementId));
-    if (tag) {
-      tag.expanded = true;
+    const tagFoundByPath = this.resolvedSpec.tags.find(t => t.paths.some(p => p.elementId === elementId));
+    if (tagFoundByPath) {
+      tagFoundByPath.expanded = true;
     }
+
     // Convert to Async and to the background, so that we can be sure that the operation has been expanded and put into view before trying to directly scroll to it (or it won't be found in the next line and even if it is, it might not be able to be scrolled into view)
     await sleep(0);
 
@@ -684,7 +685,7 @@ export default class OpenApiExplorer extends LitElement {
       // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
-    } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
+    } else if (!elementId.match('cmp--') && !elementId.match('tag--') && !elementId.match(/--h[12]$/)) {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({
         behavior: 'auto',
         block: 'start'

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/openapi-explorer.js

@@ -636,10 +636,11 @@ class OpenApiExplorer extends _lit.LitElement {
 
     // explorerLocation will get validated in the focused-endpoint-template
     this.explorerLocation = elementId;
-    const tag = this.resolvedSpec.tags.find(t => t.paths.some(p => p.elementId === elementId));
-    if (tag) {
-      tag.expanded = true;
+    const tagFoundByPath = this.resolvedSpec.tags.find(t => t.paths.some(p => p.elementId === elementId));
+    if (tagFoundByPath) {
+      tagFoundByPath.expanded = true;
     }
+
     // Convert to Async and to the background, so that we can be sure that the operation has been expanded and put into view before trying to directly scroll to it (or it won't be found in the next line and even if it is, it might not be able to be scrolled into view)
     await (0, _commonUtils.sleep)(0);
 
@@ -690,7 +691,7 @@ class OpenApiExplorer extends _lit.LitElement {
       // Update Location Hash
       (0, _commonUtils.replaceState)(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
-    } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
+    } else if (!elementId.match('cmp--') && !elementId.match('tag--') && !elementId.match(/--h[12]$/)) {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({
         behavior: 'auto',
         block: 'start'

package/package.json

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