openapi-explorer 2.1.656 → 2.1.658

package/dist/lib/openapi-explorer.js

@@ -2,54 +2,31 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _fontStyles = _interopRequireDefault(require("./styles/font-styles.js"));
-
 var _inputStyles = _interopRequireDefault(require("./styles/input-styles.js"));
-
 var _schemaStyles = _interopRequireDefault(require("./styles/schema-styles.js"));
-
 var _flexStyles = _interopRequireDefault(require("./styles/flex-styles.js"));
-
 var _tableStyles = _interopRequireDefault(require("./styles/table-styles.js"));
-
 var _keyFrameStyles = _interopRequireDefault(require("./styles/key-frame-styles.js"));
-
 var _endpointStyles = _interopRequireDefault(require("./styles/endpoint-styles.js"));
-
 var _prismStyles = _interopRequireDefault(require("./styles/prism-styles.js"));
-
 var _tagInputStyles = _interopRequireDefault(require("./styles/tag-input-styles.js"));
-
 var _tabStyles = _interopRequireDefault(require("./styles/tab-styles.js"));
-
 var _navStyles = _interopRequireDefault(require("./styles/nav-styles.js"));
-
 var _infoStyles = _interopRequireDefault(require("./styles/info-styles.js"));
-
 var _advancedSearchStyles = _interopRequireDefault(require("./styles/advanced-search-styles.js"));
-
 var _commonUtils = require("./utils/common-utils.js");
-
 var _index = require("./languages/index.js");
-
 var _specParser = _interopRequireDefault(require("./utils/spec-parser.js"));
-
 var _mainBodyTemplate = _interopRequireDefault(require("./templates/mainBodyTemplate.js"));
-
 var _apiRequestStyles = _interopRequireDefault(require("./styles/api-request-styles.js"));
-
 var _securitySchemeTemplate = require("./templates/security-scheme-template.js");
-
 require("./components/syntax-highlighter.js");
-
 require("./openapi-explorer-oauth-handler.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // Styles
+
 class OpenApiExplorer extends _lit.LitElement {
   constructor() {
     super();
@@ -61,7 +38,6 @@ class OpenApiExplorer extends _lit.LitElement {
       threshold: 0
     };
     this.isIntersectionObserverActive = true;
-
     if (typeof IntersectionObserver !== 'undefined') {
       this.intersectionObserver = new IntersectionObserver(entries => {
         this.onIntersect(entries);
@@ -69,13 +45,10 @@ class OpenApiExplorer extends _lit.LitElement {
     } else {
       this.intersectionObserver = {
         disconnect() {},
-
         observe() {}
-
       };
     }
   }
-
   static get properties() {
     return {
       // Heading
@@ -99,11 +72,9 @@ class OpenApiExplorer extends _lit.LitElement {
       collapsed: {
         type: Boolean,
         attribute: 'collapse',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       operationsCollapsed: {
         type: Boolean
@@ -122,21 +93,17 @@ class OpenApiExplorer extends _lit.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,
@@ -151,65 +118,51 @@ class OpenApiExplorer extends _lit.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: {
@@ -260,11 +213,9 @@ class OpenApiExplorer extends _lit.LitElement {
       usePathInNavBar: {
         type: Boolean,
         attribute: 'use-path-in-nav-bar',
-
         converter(value) {
           return value !== 'false' && value !== false;
         }
-
       },
       // Fetch Options
       fetchCredentials: {
@@ -289,96 +240,78 @@ class OpenApiExplorer extends _lit.LitElement {
       }
     };
   }
-
   static finalizeStyles() {
-    return [_fontStyles.default, _schemaStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _keyFrameStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _tagInputStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _lit.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.default, _schemaStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _keyFrameStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _tagInputStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _lit.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 || (0, _commonUtils.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((0, _commonUtils.getCurrentElement)());
     }, true);
     this.handleResize();
-  } // Cleanup
-
+  }
 
+  // Cleanup
   disconnectedCallback() {
     this.intersectionObserver.disconnect();
     window.removeEventListener('resize', this.handleResize);
     super.disconnectedCallback();
   }
-
   render() {
     return _mainBodyTemplate.default.call(this);
   }
-
   observeExpandedContent() {
     // Main Container
     const observeOverviewEls = this.shadowRoot.querySelectorAll('.observe-me');
@@ -386,39 +319,33 @@ class OpenApiExplorer extends _lit.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(() => {
@@ -428,24 +355,19 @@ class OpenApiExplorer extends _lit.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;
@@ -458,55 +380,43 @@ class OpenApiExplorer extends _lit.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 (0, _commonUtils.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 (0, _specParser.default)(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;
       }
-
       (0, _index.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) {
@@ -515,16 +425,15 @@ class OpenApiExplorer extends _lit.LitElement {
       this.resolvedSpec = null;
       console.error('OpenAPI Explorer: Unable to resolve the API spec..', err); // eslint-disable-line no-console
     }
-
     try {
       await _securitySchemeTemplate.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,
@@ -532,13 +441,10 @@ class OpenApiExplorer extends _lit.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') {
@@ -546,7 +452,6 @@ class OpenApiExplorer extends _lit.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();
@@ -554,56 +459,47 @@ class OpenApiExplorer extends _lit.LitElement {
     await _securitySchemeTemplate.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',
@@ -613,41 +509,34 @@ class OpenApiExplorer extends _lit.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) {
           (0, _commonUtils.replaceState)(entry.target.id);
           newNavEl.scrollIntoView({
@@ -655,24 +544,21 @@ class OpenApiExplorer extends _lit.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',
@@ -682,6 +568,7 @@ class OpenApiExplorer extends _lit.LitElement {
       }
     }
   }
+
   /**
    * Called by
    *  - onClick of Navigation Bar
@@ -693,106 +580,96 @@ class OpenApiExplorer extends _lit.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 (0, _commonUtils.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 (0, _commonUtils.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');
           }
@@ -801,69 +678,66 @@ class OpenApiExplorer extends _lit.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
       (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
+      });
 
+      // 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',
         block: 'start'
-      }); // Update Location Hash
+      });
 
+      // Update Location Hash
       (0, _commonUtils.replaceState)(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else {
       contentEl.scrollIntoView({
         behavior: 'auto',
         block: 'start'
-      }); // Update Location Hash
+      });
 
+      // Update Location Hash
       (0, _commonUtils.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',
@@ -871,42 +745,35 @@ class OpenApiExplorer extends _lit.LitElement {
         }), 600);
       }
     }
-
     await (0, _commonUtils.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 = (0, _commonUtils.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 = {
@@ -920,11 +787,8 @@ class OpenApiExplorer extends _lit.LitElement {
     };
     this.dispatchEvent(new CustomEvent('event', event));
   }
-
 }
-
 exports.default = OpenApiExplorer;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('openapi-explorer', OpenApiExplorer);
 }