openapi-explorer 2.1.635 → 2.1.637

package/dist/es/openapi-explorer.js

@@ -706,7 +706,7 @@ export default class OpenApiExplorer extends LitElement {
 
   async scrollTo(elementId, scrollNavItemToView = true, repeatedElementIndex) {
     try {
-      await this.scrollToUnsafe(elementId, scrollNavItemToView, repeatedElementIndex);
+      await this.scrollToOrThrowException(elementId, scrollNavItemToView, repeatedElementIndex);
     } catch (error) {
       // There's an issue for lit elements for some browsers which are causing this issue we'll log here and still throw
       console.error('Failed to scroll to target', elementId, scrollNavItemToView, repeatedElementIndex, error); // eslint-disable-line no-console
@@ -715,7 +715,7 @@ export default class OpenApiExplorer extends LitElement {
     }
   }
 
-  async scrollToUnsafe(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
+  async scrollToOrThrowException(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
     if (!this.resolvedSpec) {
       return;
     }
@@ -746,6 +746,7 @@ export default class OpenApiExplorer extends LitElement {
 
 
     let newNavEl;
+    let waitForComponentToExpand = false;
     const elementIndex = forcedRepeatedElementIndex || forcedRepeatedElementIndex === 0 ? forcedRepeatedElementIndex : Number(elementId.split('--')[1]) - 1;
 
     if (elementId.match(/^section/)) {
@@ -773,6 +774,21 @@ export default class OpenApiExplorer extends LitElement {
       newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[elementIndex]; // Update Location Hash
 
       replaceState(`section--${elementIndex + 1}`);
+    } else if (elementId.match('cmp--')) {
+      const component = this.resolvedSpec.components.find(c => c.subComponents.find(sub => elementId.includes(sub.id)));
+
+      if (component && !component.expanded) {
+        waitForComponentToExpand = true;
+        component.expanded = true;
+      }
+
+      contentEl.scrollIntoView({
+        behavior: 'auto',
+        block: 'start'
+      }); // Update Location Hash
+
+      replaceState(elementId);
+      newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({
         behavior: 'auto',
@@ -813,7 +829,14 @@ export default class OpenApiExplorer extends LitElement {
       newNavEl.scrollIntoView({
         behavior: 'auto',
         block: 'center'
-      });
+      }); // Also force it into view again if for some reason it isn't there
+
+      if (waitForComponentToExpand) {
+        setTimeout(() => newNavEl.scrollIntoView({
+          behavior: 'auto',
+          block: 'center'
+        }), 600);
+      }
     }
 
     await sleep(0);

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

@@ -4,13 +4,12 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import '../components/schema-tree.js';
-import { replaceState } from '../utils/common-utils.js';
 
 function componentBodyTemplate(sComponent) {
   const formdataPartSchema = schemaInObjectNotation(sComponent.component, {
     includeNulls: this.includeNulls
   });
-  return html` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}" @click="${() => replaceState(`cmp--${sComponent.id}`)}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? html`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
+  return html` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}" @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? html`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
 }
 
 export default function componentsTemplate() {

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

@@ -36,6 +36,10 @@ export function expandCollapseAll(currentElement, expand) {
   this.resolvedSpec.tags.forEach(t => t.expanded = expand);
   this.requestUpdate();
 }
+export function expandCollapseComponent(component) {
+  component.expanded = !component.expanded;
+  this.requestUpdate();
+}
 /* eslint-disable indent */
 
 function endpointHeadTemplate(path) {

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

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { marked } from 'marked';
 import { componentIsInSearch, pathIsInSearch } from '../utils/common-utils.js';
 import { getI18nText } from '../languages/index.js';
+import { expandCollapseComponent } from './endpoint-template.js';
 
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
@@ -46,8 +47,9 @@ export default function navbarTemplate() {
     onExpandCollapse.call(this, tag.elementId);
   }}"> <div style="display:flex;justify-content:space-between;width:100%"> <div style="margin-right:.5rem">${tag.name}</div> <div class="toggle">▾</div> </div> </div> `} <div class="nav-bar-section-wrapper"> <div> ${tag.headers.map(header => html` <div class="nav-bar-h${header.depth}" id="link-${tag.elementId}--${new marked.Slugger().slug(header.text)}" data-content-id="${tag.elementId}--${new marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)} </div> <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => pathIsInSearch(this.matchPaths, v)).map(p => html` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? html`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? html` <div class="sticky-scroll-element ${this.componentsCollapsed ? 'collapsed' : ''}" @click="${() => {
-    expandCollapseAllComponents.call(this);
-  }}"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${getI18nText('menu.components')}</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))) ? html` <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div></div>` : ''} </div> </div>  ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))).map(component => html` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => componentIsInSearch(this.matchPaths, s)).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`)}` : ''} </nav>`} </nav> `;
+  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? html`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${getI18nText('menu.components')}</div> </slot> </div> </div> ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))).map(component => html` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => {
+    expandCollapseComponent.call(this, component);
+    this.scrollToEventTarget(e, false);
+  }}"> <div> ${component.name} </div> <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div> </div> </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => componentIsInSearch(this.matchPaths, s)).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`)}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

package/dist/lib/openapi-explorer.js

@@ -736,7 +736,7 @@ class OpenApiExplorer extends _lit.LitElement {
 
   async scrollTo(elementId, scrollNavItemToView = true, repeatedElementIndex) {
     try {
-      await this.scrollToUnsafe(elementId, scrollNavItemToView, repeatedElementIndex);
+      await this.scrollToOrThrowException(elementId, scrollNavItemToView, repeatedElementIndex);
     } catch (error) {
       // There's an issue for lit elements for some browsers which are causing this issue we'll log here and still throw
       console.error('Failed to scroll to target', elementId, scrollNavItemToView, repeatedElementIndex, error); // eslint-disable-line no-console
@@ -745,7 +745,7 @@ class OpenApiExplorer extends _lit.LitElement {
     }
   }
 
-  async scrollToUnsafe(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
+  async scrollToOrThrowException(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
     if (!this.resolvedSpec) {
       return;
     }
@@ -776,6 +776,7 @@ class OpenApiExplorer extends _lit.LitElement {
 
 
     let newNavEl;
+    let waitForComponentToExpand = false;
     const elementIndex = forcedRepeatedElementIndex || forcedRepeatedElementIndex === 0 ? forcedRepeatedElementIndex : Number(elementId.split('--')[1]) - 1;
 
     if (elementId.match(/^section/)) {
@@ -803,6 +804,21 @@ class OpenApiExplorer extends _lit.LitElement {
       newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[elementIndex]; // Update Location Hash
 
       (0, _commonUtils.replaceState)(`section--${elementIndex + 1}`);
+    } else if (elementId.match('cmp--')) {
+      const component = this.resolvedSpec.components.find(c => c.subComponents.find(sub => elementId.includes(sub.id)));
+
+      if (component && !component.expanded) {
+        waitForComponentToExpand = true;
+        component.expanded = true;
+      }
+
+      contentEl.scrollIntoView({
+        behavior: 'auto',
+        block: 'start'
+      }); // Update Location Hash
+
+      (0, _commonUtils.replaceState)(elementId);
+      newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({
         behavior: 'auto',
@@ -843,7 +859,14 @@ class OpenApiExplorer extends _lit.LitElement {
       newNavEl.scrollIntoView({
         behavior: 'auto',
         block: 'center'
-      });
+      }); // Also force it into view again if for some reason it isn't there
+
+      if (waitForComponentToExpand) {
+        setTimeout(() => newNavEl.scrollIntoView({
+          behavior: 'auto',
+          block: 'center'
+        }), 600);
+      }
     }
 
     await (0, _commonUtils.sleep)(0);

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

@@ -13,14 +13,12 @@ var _marked = require("marked");
 
 require("../components/schema-tree.js");
 
-var _commonUtils = require("../utils/common-utils.js");
-
 /* eslint-disable no-console */
 function componentBodyTemplate(sComponent) {
   const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(sComponent.component, {
     includeNulls: this.includeNulls
   });
-  return (0, _lit.html)` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}" @click="${() => (0, _commonUtils.replaceState)(`cmp--${sComponent.id}`)}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? (0, _lit.html)`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : (0, _lit.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
+  return (0, _lit.html)` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}" @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? (0, _lit.html)`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : (0, _lit.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
 }
 
 function componentsTemplate() {

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

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.default = endpointTemplate;
 exports.expandCollapseAll = expandCollapseAll;
+exports.expandCollapseComponent = expandCollapseComponent;
 
 var _lit = require("lit");
 
@@ -52,6 +53,11 @@ function expandCollapseAll(currentElement, expand) {
   this.resolvedSpec.tags.forEach(t => t.expanded = expand);
   this.requestUpdate();
 }
+
+function expandCollapseComponent(component) {
+  component.expanded = !component.expanded;
+  this.requestUpdate();
+}
 /* eslint-disable indent */
 
 

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

@@ -13,6 +13,8 @@ var _commonUtils = require("../utils/common-utils.js");
 
 var _index = require("../languages/index.js");
 
+var _endpointTemplate = require("./endpoint-template.js");
+
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
 
@@ -58,8 +60,10 @@ function navbarTemplate() {
     onExpandCollapse.call(this, tag.elementId);
   }}"> <div style="display:flex;justify-content:space-between;width:100%"> <div style="margin-right:.5rem">${tag.name}</div> <div class="toggle">▾</div> </div> </div> `} <div class="nav-bar-section-wrapper"> <div> ${tag.headers.map(header => (0, _lit.html)` <div class="nav-bar-h${header.depth}" id="link-${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" data-content-id="${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)} </div> <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => (0, _commonUtils.pathIsInSearch)(this.matchPaths, v)).map(p => (0, _lit.html)` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? (0, _lit.html)`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => (0, _lit.html)`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _lit.html)` <div class="sticky-scroll-element ${this.componentsCollapsed ? 'collapsed' : ''}" @click="${() => {
-    expandCollapseAllComponents.call(this);
-  }}"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${(0, _index.getI18nText)('menu.components')}</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))) ? (0, _lit.html)` <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div></div>` : ''} </div> </div>  ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))).map(component => (0, _lit.html)` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s)).map(p => (0, _lit.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`)}` : ''} </nav>`} </nav> `;
+  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? (0, _lit.html)`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => (0, _lit.html)`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _lit.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${(0, _index.getI18nText)('menu.components')}</div> </slot> </div> </div> ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))).map(component => (0, _lit.html)` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => {
+    _endpointTemplate.expandCollapseComponent.call(this, component);
+
+    this.scrollToEventTarget(e, false);
+  }}"> <div> ${component.name} </div> <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div> </div> </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s)).map(p => (0, _lit.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`)}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

package/package.json

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