openapi-explorer 2.1.656 → 2.1.659

package/dist/es/openapi-explorer.js

@@ -1,5 +1,6 @@
-import { LitElement, css } from 'lit'; // Styles
+import { LitElement, css } from 'lit';
 
+// Styles
 import FontStyles from './styles/font-styles.js';
 import InputStyles from './styles/input-styles.js';
 import SchemaStyles from './styles/schema-styles.js';
@@ -31,7 +32,6 @@ export default class OpenApiExplorer extends LitElement {
       threshold: 0
     };
     this.isIntersectionObserverActive = true;
-
     if (typeof IntersectionObserver !== 'undefined') {
       this.intersectionObserver = new IntersectionObserver(entries => {
         this.onIntersect(entries);
@@ -39,13 +39,10 @@ export default class OpenApiExplorer extends LitElement {
     } else {
       this.intersectionObserver = {
         disconnect() {},
-
         observe() {}
-
       };
     }
   }
-
   static get properties() {
     return {
       // Heading
@@ -69,11 +66,9 @@ export default class OpenApiExplorer extends LitElement {
       collapsed: {
         type: Boolean,
         attribute: 'collapse',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       operationsCollapsed: {
         type: Boolean
@@ -92,21 +87,17 @@ export default class OpenApiExplorer extends LitElement {
       hideDefaults: {
         type: Boolean,
         attribute: 'hide-defaults',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       // Schema Styles
       displaySchemaAsTable: {
         type: Boolean,
         attribute: 'table',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       schemaExpandLevel: {
         type: Number,
@@ -121,65 +112,51 @@ export default class OpenApiExplorer extends LitElement {
       hideInfo: {
         type: Boolean,
         attribute: 'hide-info',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       hideAuthentication: {
         type: Boolean,
         attribute: 'hide-authentication',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       hideExecution: {
         type: Boolean,
         attribute: 'hide-console',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       includeNulls: {
         type: Boolean,
         attribute: 'display-nulls',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       hideSearch: {
         type: Boolean,
         attribute: 'hide-search',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       hideServerSelection: {
         type: Boolean,
         attribute: 'hide-server-selection',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       hideComponents: {
         type: Boolean,
         attribute: 'hide-components',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       // Main Colors and Font
       primaryColor: {
@@ -230,11 +207,9 @@ export default class OpenApiExplorer extends LitElement {
       usePathInNavBar: {
         type: Boolean,
         attribute: 'use-path-in-nav-bar',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       // Fetch Options
       fetchCredentials: {
@@ -259,96 +234,78 @@ export default class OpenApiExplorer extends LitElement {
       }
     };
   }
-
   static finalizeStyles() {
-    return [FontStyles, SchemaStyles, InputStyles, FlexStyles, TableStyles, KeyFrameStyles, EndpointStyles, PrismStyles, TabStyles, NavStyles, InfoStyles, TagInputStyles, advancedSearchStyles, apiRequestStyles, css`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}a{text-decoration:none}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{margin:0;padding:0 8px 0 4px;border-bottom:1px solid var(--border-color)}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body,.expanded-endpoint-component{position:relative;padding:6px 0}.expanded-endpoint-component>h2:hover{cursor:pointer;text-decoration:underline}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.security-tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.security-tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip-replace:hover{visibility:hidden}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;cursor:text;opacity:1}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:330px;display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
-  } // Startup
-
+    return [FontStyles, SchemaStyles, InputStyles, FlexStyles, TableStyles, KeyFrameStyles, EndpointStyles, PrismStyles, TabStyles, NavStyles, InfoStyles, TagInputStyles, advancedSearchStyles, apiRequestStyles, css`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}a{text-decoration:none}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{margin:0;padding:0 8px 0 4px;border-bottom:1px solid var(--border-color)}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body,.expanded-endpoint-component{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.security-tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.security-tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip-replace:hover{visibility:hidden}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;cursor:text;opacity:1}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:330px;display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
+  }
 
+  // Startup
   connectedCallback() {
     super.connectedCallback();
     this.handleResize = this.handleResize.bind(this);
     window.addEventListener('resize', this.handleResize);
     this.loading = true;
     const parent = this.parentElement;
-
     if (parent) {
       if (parent.offsetWidth === 0 && parent.style.width === '') {
         parent.style.width = '100vw';
       }
-
       if (parent.offsetHeight === 0 && parent.style.height === '') {
         parent.style.height = '100vh';
       }
-
       if (parent.tagName === 'BODY') {
         if (!parent.style.marginTop) {
           parent.style.marginTop = '0';
         }
-
         if (!parent.style.marginRight) {
           parent.style.marginRight = '0';
         }
-
         if (!parent.style.marginBottom) {
           parent.style.marginBottom = '0';
         }
-
         if (!parent.style.marginLeft) {
           parent.style.marginLeft = '0';
         }
       }
     }
-
     this.renderStyle = 'focused';
     this.operationsCollapsed = this.collapsed;
     this.componentsCollapsed = this.collapsed;
     this.explorerLocation = this.explorerLocation || getCurrentElement();
-
     if (!this.defaultSchemaTab || !'body, model, form,'.includes(`${this.defaultSchemaTab},`)) {
       this.defaultSchemaTab = 'model';
     }
-
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
       this.schemaExpandLevel = 99999;
     }
-
     this.schemaHideReadOnly = ['post', 'put', 'patch', 'query'].join(',');
     this.schemaHideWriteOnly = true;
-
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '300px';
     }
-
     if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) {
       this.navItemSpacing = 'default';
     }
-
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) {
       this.fetchCredentials = '';
     }
-
     if (!this.showAdvancedSearchDialog) {
       this.showAdvancedSearchDialog = false;
     }
-
     window.addEventListener('hashchange', () => {
       this.scrollTo(getCurrentElement());
     }, true);
     this.handleResize();
-  } // Cleanup
-
+  }
 
+  // Cleanup
   disconnectedCallback() {
     this.intersectionObserver.disconnect();
     window.removeEventListener('resize', this.handleResize);
     super.disconnectedCallback();
   }
-
   render() {
     return mainBodyTemplate.call(this);
   }
-
   observeExpandedContent() {
     // Main Container
     const observeOverviewEls = this.shadowRoot.querySelectorAll('.observe-me');
@@ -356,39 +313,33 @@ export default class OpenApiExplorer extends LitElement {
       this.intersectionObserver.observe(targetEl);
     });
   }
-
   handleResize() {
     const mediaQueryResult = window.matchMedia('(min-width: 768px)');
     const newDisplay = mediaQueryResult.matches ? 'focused' : 'view';
-
     if (this.renderStyle !== newDisplay) {
       this.renderStyle = newDisplay;
       this.requestUpdate();
     }
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (name === 'spec-url') {
       if (oldVal !== newVal) {
         window.setTimeout(async () => {
-          await this.loadSpec(newVal); // If the initial location is set, then attempt to scroll there
-
+          await this.loadSpec(newVal);
+          // If the initial location is set, then attempt to scroll there
           if (this.explorerLocation) {
             this.scrollTo(this.explorerLocation);
           }
         }, 0);
       }
     }
-
     if (name === 'server-url' && newVal) {
       var _this$resolvedSpec;
-
       this.selectedServer = ((_this$resolvedSpec = this.resolvedSpec) === null || _this$resolvedSpec === void 0 ? void 0 : _this$resolvedSpec.servers.find(s => s.url === newVal || !newVal)) || {
         url: newVal,
         computedUrl: newVal
       };
     }
-
     if (name === 'render-style') {
       if (newVal === 'read') {
         window.setTimeout(() => {
@@ -398,24 +349,19 @@ export default class OpenApiExplorer extends LitElement {
         this.intersectionObserver.disconnect();
       }
     }
-
     if (name === 'explorer-location') {
       window.setTimeout(() => {
         this.scrollTo(newVal);
       }, 0);
     }
-
     if (name === 'collapsed') {
       this.operationsCollapsed = newVal;
       this.componentsCollapsed = newVal;
     }
-
     super.attributeChangedCallback(name, oldVal, newVal);
   }
-
   onSearchChange(e) {
     var _this$matchPaths;
-
     this.matchPaths = e.target.value;
     const expand = !!((_this$matchPaths = this.matchPaths) !== null && _this$matchPaths !== void 0 && _this$matchPaths.trim());
     this.operationsCollapsed = !expand;
@@ -428,55 +374,43 @@ export default class OpenApiExplorer extends LitElement {
     });
     this.requestUpdate();
   }
-
   onClearSearch() {
     const searchEl = this.shadowRoot.getElementById('nav-bar-search');
     searchEl.value = '';
     this.matchPaths = '';
   }
-
   async onShowSearchModalClicked() {
-    this.showAdvancedSearchDialog = true; // wait for the dialog to render
-
+    this.showAdvancedSearchDialog = true;
+    // wait for the dialog to render
     await sleep(10);
     const inputEl = this.shadowRoot.getElementById('advanced-search-dialog-input');
-
     if (inputEl) {
       inputEl.focus();
     }
-  } // Public Method
-
+  }
 
+  // Public Method
   async loadSpec(specUrlOrObject) {
     if (!specUrlOrObject) {
       return;
     }
-
     this.matchPaths = '';
-
     try {
       var _spec$info;
-
       this.resolvedSpec = null;
       this.loading = true;
       this.loadFailed = false;
       const spec = await ProcessSpec(specUrlOrObject, this.serverUrl);
       this.loading = false;
-
       if (spec === undefined || spec === null) {
         console.error('Unable to resolve the API spec. '); // eslint-disable-line no-console
-
         return;
       }
-
       initI18n((_spec$info = spec.info) === null || _spec$info === void 0 ? void 0 : _spec$info['x-locale']);
-
       if (!this.serverUrl) {
         var _spec$servers$, _spec$servers$2;
-
         this.serverUrl = ((_spec$servers$ = spec.servers[0]) === null || _spec$servers$ === void 0 ? void 0 : _spec$servers$.computedUrl) || ((_spec$servers$2 = spec.servers[0]) === null || _spec$servers$2 === void 0 ? void 0 : _spec$servers$2.url);
       }
-
       this.selectedServer = spec.servers.find(s => s.url === this.serverUrl || !this.serverUrl) || spec.servers[0];
       this.afterSpecParsedAndValidated(spec);
     } catch (err) {
@@ -485,16 +419,15 @@ export default class OpenApiExplorer extends LitElement {
       this.resolvedSpec = null;
       console.error('OpenAPI Explorer: Unable to resolve the API spec..', err); // eslint-disable-line no-console
     }
-
     try {
       await checkForAuthToken.call(this);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error('Failed to check for authentication token', error);
     }
-  } // Public Method
-
+  }
 
+  // Public Method
   async setAuthenticationConfiguration(apiKeyId, {
     token,
     clientId,
@@ -502,13 +435,10 @@ export default class OpenApiExplorer extends LitElement {
     redirectUri
   }) {
     const securityObj = this.resolvedSpec && this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
-
     if (!securityObj) {
       throw Error('SecuritySchemeNotFound');
     }
-
     let authorizationToken = token && token.replace(/^(Bearer|Basic)\s+/i, '').trim();
-
     if (authorizationToken && securityObj.type && securityObj.type === 'http' && securityObj.scheme && securityObj.scheme.toLowerCase() === 'basic') {
       authorizationToken = `Basic ${btoa(authorizationToken)}`;
     } else if (authorizationToken && securityObj.scheme && securityObj.scheme.toLowerCase() === 'bearer') {
@@ -516,7 +446,6 @@ export default class OpenApiExplorer extends LitElement {
     } else {
       authorizationToken = null;
     }
-
     securityObj.clientId = clientId && clientId.trim();
     securityObj.clientSecret = clientSecret && clientSecret.trim();
     securityObj.redirectUri = new URL(redirectUri && redirectUri.trim() || '', window.location.href).toString();
@@ -524,56 +453,47 @@ export default class OpenApiExplorer extends LitElement {
     await checkForAuthToken.call(this);
     this.requestUpdate();
   }
-
   afterSpecParsedAndValidated(spec) {
     this.resolvedSpec = spec;
-
     if (this.operationsCollapsed) {
       this.resolvedSpec.tags.forEach(t => t.expanded = false);
     }
-
     if (this.componentsCollapsed) {
       this.resolvedSpec.components.forEach(c => c.expanded = false);
     }
-
     this.dispatchEvent(new CustomEvent('spec-loaded', {
       bubbles: true,
       detail: spec
     }));
-    this.requestUpdate(); // Initiate IntersectionObserver and put it at the end of event loop, to allow loading all the child elements (must for larger specs)
+    this.requestUpdate();
 
+    // Initiate IntersectionObserver and put it at the end of event loop, to allow loading all the child elements (must for larger specs)
     this.intersectionObserver.disconnect();
-
     if (this.renderStyle === 'focused') {
       const defaultElementId = !this.hideInfo ? 'overview' : this.resolvedSpec.tags && this.resolvedSpec.tags[0] && this.resolvedSpec.tags[0].paths[0];
       this.scrollTo(this.explorerLocation || defaultElementId);
     }
-
     if (this.renderStyle === 'view' && this.explorerLocation) {
       this.expandAndGotoOperation(this.explorerLocation);
     }
   }
-
   expandAndGotoOperation(elementId) {
     var _tag$paths;
-
     // Expand full operation and tag
     let isExpandingNeeded = false;
     const tag = this.resolvedSpec.tags.find(t => t.paths && t.paths.find(p => p.elementId === elementId));
     const path = tag === null || tag === void 0 ? void 0 : (_tag$paths = tag.paths) === null || _tag$paths === void 0 ? void 0 : _tag$paths.find(p => p.elementId === elementId);
-
     if (path && (!path.expanded || !tag.expanded)) {
       isExpandingNeeded = true;
       path.expanded = true;
       tag.expanded = true;
       this.requestUpdate();
-    } // requestUpdate() and delay required, else we cant find element because it won't exist immediately
-
+    }
 
+    // requestUpdate() and delay required, else we cant find element because it won't exist immediately
     const tmpElementId = elementId.indexOf('#') === -1 ? elementId : elementId.substring(1);
     window.setTimeout(() => {
       const gotoEl = this.shadowRoot.getElementById(tmpElementId);
-
       if (gotoEl) {
         gotoEl.scrollIntoView({
           behavior: 'auto',
@@ -583,41 +503,34 @@ export default class OpenApiExplorer extends LitElement {
       }
     }, isExpandingNeeded ? 150 : 0);
   }
-
   isValidTopId(id) {
     return id.startsWith('overview') || id === 'servers' || id === 'auth';
   }
-
   isValidPathId(id) {
     if (id === 'overview' && !this.hideInfo) {
       return true;
     }
-
     if (id === 'servers' && !this.hideServerSelection) {
       return true;
     }
-
     if (id === 'auth' && !this.hideAuthentication) {
       return true;
     }
-
     if (id.startsWith('tag--')) {
       return this.resolvedSpec.tags && this.resolvedSpec.tags.find(tag => tag.elementId === id);
     }
-
     return this.resolvedSpec.tags && this.resolvedSpec.tags.find(tag => tag.paths.find(path => path.elementId === id));
   }
-
   onIntersect(entries) {
     if (this.isIntersectionObserverActive === false) {
       return;
     }
-
     entries.forEach(entry => {
       if (entry.isIntersecting && entry.intersectionRatio > 0) {
         const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active');
-        const newNavEl = this.shadowRoot.getElementById(`link-${entry.target.id}`); // Add active class in the new element
+        const newNavEl = this.shadowRoot.getElementById(`link-${entry.target.id}`);
 
+        // Add active class in the new element
         if (newNavEl) {
           replaceState(entry.target.id);
           newNavEl.scrollIntoView({
@@ -625,24 +538,21 @@ export default class OpenApiExplorer extends LitElement {
             block: 'center'
           });
           newNavEl.classList.add('active');
-        } // Remove active class from previous element
-
-
+        }
+        // Remove active class from previous element
         if (oldNavEl) {
           oldNavEl.classList.remove('active');
         }
       }
     });
-  } // Called by anchor tags created using markdown
-
+  }
 
+  // Called by anchor tags created using markdown
   handleHref(e) {
     if (e.target.tagName.toLowerCase() === 'a') {
       const anchor = e.target.getAttribute('href');
-
       if (anchor && anchor.startsWith('#')) {
         const gotoEl = this.shadowRoot.getElementById(anchor.replace('#', ''));
-
         if (gotoEl) {
           gotoEl.scrollIntoView({
             behavior: 'auto',
@@ -652,6 +562,7 @@ export default class OpenApiExplorer extends LitElement {
       }
     }
   }
+
   /**
    * Called by
    *  - onClick of Navigation Bar
@@ -663,106 +574,96 @@ export default class OpenApiExplorer extends LitElement {
    *  3. Activate IntersectionObserver (after little delay)
    *
   */
-
-
   scrollToEventTarget(event, scrollNavItemToView = true) {
     const navEl = event.currentTarget;
-
     if (!navEl.dataset.contentId) {
       return;
     }
-
     this.isIntersectionObserverActive = false;
     this.scrollTo(navEl.dataset.contentId, scrollNavItemToView);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
     }, 300);
   }
-
   scrollToCustomNavSectionTarget(event, scrollNavItemToView = true) {
     const navEl = event.currentTarget;
-
     if (!navEl.dataset.contentId) {
       return;
     }
-
     const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
-    const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes(); // clicked child node could be multiple levels deep in a custom nav
+    const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
 
+    // clicked child node could be multiple levels deep in a custom nav
     const hasChildNode = node => {
       return node === event.target || node.children && [...node.children].some(c => hasChildNode(c));
     };
-
     let repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, slot => hasChildNode(slot));
-
     if (repeatedElementIndex === -1 && navEl.dataset.contentId.match(/^section--\d+/)) {
       repeatedElementIndex = Number(navEl.dataset.contentId.split('--')[1]) - 1;
     }
-
     this.isIntersectionObserverActive = false;
     this.scrollTo(navEl.dataset.contentId, scrollNavItemToView, repeatedElementIndex);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
     }, 300);
-  } // Public Method (scrolls to a given path and highlights the left-nav selection)
-
+  }
+  async scrollToSchemaComponentByName(schemaComponentNameEvent) {
+    var _this$resolvedSpec2, _this$resolvedSpec2$c, _this$resolvedSpec2$c2, _this$resolvedSpec2$c3;
+    const schemaComponentName = schemaComponentNameEvent.detail;
+    const schemaComponent = (_this$resolvedSpec2 = this.resolvedSpec) === null || _this$resolvedSpec2 === void 0 ? void 0 : (_this$resolvedSpec2$c = _this$resolvedSpec2.components) === null || _this$resolvedSpec2$c === void 0 ? void 0 : (_this$resolvedSpec2$c2 = _this$resolvedSpec2$c.find(c => c.componentKeyId === 'schemas')) === null || _this$resolvedSpec2$c2 === void 0 ? void 0 : (_this$resolvedSpec2$c3 = _this$resolvedSpec2$c2.subComponents) === null || _this$resolvedSpec2$c3 === void 0 ? void 0 : _this$resolvedSpec2$c3.find(s => s.name === schemaComponentName);
+    if (schemaComponent) {
+      await this.scrollTo(`cmp--${schemaComponent.id}`, true);
+    }
+  }
 
+  // Public Method (scrolls to a given path and highlights the left-nav selection)
   async scrollTo(elementId, scrollNavItemToView = true, repeatedElementIndex) {
     try {
       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
-
       throw error;
     }
   }
-
   async scrollToOrThrowException(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
     if (!this.resolvedSpec) {
       return;
     }
-
     this.emitOperationChangedEvent(elementId);
-
     if (this.renderStyle === 'view') {
       this.expandAndGotoOperation(elementId);
       return;
-    } // explorerLocation will get validated in the focused-endpoint-template
-
+    }
 
+    // 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;
-    } // 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); // In the case of section scrolling, these are hard swaps, so just load "section". In the case of `tags` the headers have the element html Id in the last `--id`, so split that off and check for it
+    }
+    // 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);
 
+    // In the case of section scrolling, these are hard swaps, so just load "section". In the case of `tags` the headers have the element html Id in the last `--id`, so split that off and check for it
     const contentEl = this.shadowRoot.getElementById(elementId !== null && elementId !== void 0 && elementId.startsWith('section') ? 'section' : elementId) || this.shadowRoot.getElementById(elementId.split('--').slice(-1)[0]);
-
     if (!contentEl) {
       return;
-    } // For focused APIs, always scroll to the top of the component
-
+    }
 
+    // For focused APIs, always scroll to the top of the component
     let newNavEl;
     let waitForComponentToExpand = false;
     const elementIndex = forcedRepeatedElementIndex || forcedRepeatedElementIndex === 0 ? forcedRepeatedElementIndex : Number(elementId.split('--')[1]) - 1;
-
     if (elementId.match(/^section/)) {
       const customSections = this.shadowRoot.querySelector('slot.custom-section');
       const assignedNodesToCustomSections = customSections === null || customSections === void 0 ? void 0 : customSections.assignedNodes();
-
       if (assignedNodesToCustomSections) {
         try {
           assignedNodesToCustomSections.map(customSection => {
             customSection.classList.remove('active');
           });
           const newActiveCustomSection = assignedNodesToCustomSections[elementIndex];
-
           if (newActiveCustomSection && !newActiveCustomSection.classList.contains('active')) {
             newActiveCustomSection.classList.add('active');
           }
@@ -771,69 +672,66 @@ export default class OpenApiExplorer extends LitElement {
           console.error('Failed to switch between custom sections, usually happens because the DOM is not ready and has not loaded these sections yet.', error);
         }
       }
-
       const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
       const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
-      newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[elementIndex]; // Update Location Hash
+      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
+      });
 
+      // 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',
         block: 'start'
-      }); // Update Location Hash
+      });
 
+      // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else {
       contentEl.scrollIntoView({
         behavior: 'auto',
         block: 'start'
-      }); // Update Location Hash
+      });
 
+      // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
-    } // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
-
+    }
 
+    // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
     const requestEl = this.shadowRoot.querySelector('api-request');
-
     if (requestEl) {
       requestEl.resetRequestBodySelection();
     }
-
     const responseEl = this.shadowRoot.querySelector('api-response');
-
     if (responseEl) {
       responseEl.resetSelection();
-    } // Update NavBar View and Styles
-
+    }
 
+    // Update NavBar View and Styles
     if (!newNavEl) {
       return;
     }
-
     if (scrollNavItemToView) {
       newNavEl.scrollIntoView({
         behavior: 'auto',
         block: 'center'
-      }); // Also force it into view again if for some reason it isn't there
-
+      });
+      // Also force it into view again if for some reason it isn't there
       if (waitForComponentToExpand) {
         setTimeout(() => newNavEl.scrollIntoView({
           behavior: 'auto',
@@ -841,42 +739,35 @@ export default class OpenApiExplorer extends LitElement {
         }), 600);
       }
     }
-
     await sleep(0);
     const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active');
-
     if (oldNavEl) {
       oldNavEl.classList.remove('active');
     }
-
     const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
     const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
     (assignedNodes || []).filter((n, nodeIndex) => isNaN(elementIndex) || nodeIndex !== elementIndex).forEach(node => {
       node.classList.remove('active');
     });
     newNavEl.classList.add('active'); // must add the class after scrolling
-
     this.requestUpdate();
-  } // Event handler for Advanced Search text-inputs and checkboxes
-
+  }
 
+  // Event handler for Advanced Search text-inputs and checkboxes
   onAdvancedSearch(ev) {
     const eventTargetEl = ev.target;
     clearTimeout(this.timeoutId);
     this.timeoutId = setTimeout(() => {
       let searchInputEl;
-
       if (eventTargetEl.type === 'text') {
         searchInputEl = eventTargetEl;
       } else {
         searchInputEl = eventTargetEl.closest('.advanced-search-options').querySelector('input[type=text]');
       }
-
       const searchOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map(v => v.id);
       this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searchOptions);
     }, 0);
   }
-
   emitOperationChangedEvent(elementId) {
     const operation = this.resolvedSpec.tags.map(t => t.paths).flat(1).find(p => p.elementId === elementId);
     const event = {
@@ -890,11 +781,8 @@ export default class OpenApiExplorer extends LitElement {
     };
     this.dispatchEvent(new CustomEvent('event', event));
   }
-
 }
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('openapi-explorer', OpenApiExplorer);
 }
-
 import './openapi-explorer-oauth-handler.js';