openapi-explorer 2.1.654 → 2.1.658

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

@@ -3,46 +3,32 @@
 exports.__esModule = true;
 exports.expandedEndpointBodyTemplate = expandedEndpointBodyTemplate;
 exports.expandedTagTemplate = expandedTagTemplate;
-
 var _lit = require("lit");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _marked = require("marked");
-
 var _securitySchemeTemplate = require("./security-scheme-template.js");
-
 var _codeSamplesTemplate = _interopRequireDefault(require("./code-samples-template.js"));
-
 var _callbackTemplate = _interopRequireDefault(require("./callback-template.js"));
-
 require("../components/api-request.js");
-
 require("../components/api-response.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable indent */
 function expandedEndpointBodyTemplate(path, tagName = '') {
   var _path$servers, _path$servers$, _this$selectedServer;
-
   const acceptContentTypes = new Set();
-
   for (const respStatus in path.responses) {
     for (const acceptContentType in (_path$responses$respS = path.responses[respStatus]) === null || _path$responses$respS === void 0 ? void 0 : _path$responses$respS.content) {
       var _path$responses$respS;
-
       acceptContentTypes.add(acceptContentType.trim());
     }
   }
+  const accept = [...acceptContentTypes].join(', ');
 
-  const accept = [...acceptContentTypes].join(', '); // Filter API Keys that are non-empty and are applicable to the the path
-
+  // Filter API Keys that are non-empty and are applicable to the the path
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? _codeSamplesTemplate.default.call(this, path.xCodeSamples) : '';
-  return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂' ? (0, _lit.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _lit.html)`<div class="bold-text red-text"> DEPRECATED </div>` : ''} <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.html)`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div> </div> ${path.externalDocs ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.externalDocs.description || ''))} <a href="${path.externalDocs.url}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
+  return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂' ? (0, _lit.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _lit.html)`<div class="bold-text red-text"> DEPRECATED </div>` : ''} <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.html)`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div> </div> ${path.externalDocs ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.externalDocs.description || ''))} <a href="${path.externalDocs.url}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
 }
-
 function expandedTagTemplate(tagId, subsectionFullId) {
   const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);
   const subsectionId = subsectionFullId.replace(`${tagId}--`, '');

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

@@ -2,51 +2,36 @@
 
 exports.__esModule = true;
 exports.default = focusedEndpointTemplate;
-
 var _lit = require("lit");
-
 var _expandedEndpointTemplate = require("./expanded-endpoint-template.js");
-
 require("../components/api-request.js");
-
 require("../components/api-response.js");
-
 var _componentsTemplate = _interopRequireDefault(require("./components-template.js"));
-
 var _overviewTemplate = _interopRequireDefault(require("./overview-template.js"));
-
 var _serverTemplate = _interopRequireDefault(require("./server-template.js"));
-
 var _securitySchemeTemplate = _interopRequireDefault(require("./security-scheme-template.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function wrapFocusedTemplate(templateToWrap) {
   return (0, _lit.html)` <div class="regular-font section-gap--focused-mode" part="section-operations-in-tag"> ${templateToWrap} </div>`;
 }
-
 function defaultContentTemplate() {
   // In focused mode default content is overview or first path
   if (!this.hideInfo) {
     return _overviewTemplate.default.call(this);
   }
-
   const selectedTagObj = this.resolvedSpec.tags[0];
   const selectedPathObj = selectedTagObj === null || selectedTagObj === void 0 ? void 0 : selectedTagObj.paths[0];
   return selectedPathObj ? wrapFocusedTemplate(_expandedEndpointTemplate.expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name)) : wrapFocusedTemplate('');
 }
-
 function focusedEndpointTemplate() {
   if (!this.explorerLocation || !this.resolvedSpec) {
     return undefined;
   }
-
   const focusElId = this.explorerLocation;
   let selectedPathObj = null;
   let selectedTagObj = null;
   let focusedTemplate;
   let i = 0;
-
   if (focusElId.startsWith('overview') && !this.hideInfo) {
     focusedTemplate = _overviewTemplate.default.call(this);
   } else if (focusElId === 'auth' && !this.hideAuthentication) {
@@ -60,7 +45,6 @@ function focusedEndpointTemplate() {
   } else if (focusElId.startsWith('tag--')) {
     const idToFocus = focusElId.indexOf('--', 4) > 0 ? focusElId.substring(0, focusElId.indexOf('--', 5)) : focusElId;
     selectedTagObj = this.resolvedSpec.tags.find(v => v.elementId === idToFocus);
-
     if (selectedTagObj) {
       focusedTemplate = _expandedEndpointTemplate.expandedTagTemplate.call(this, idToFocus, focusElId);
     } else {
@@ -70,12 +54,10 @@ function focusedEndpointTemplate() {
     for (i = 0; i < this.resolvedSpec.tags.length; i += 1) {
       selectedTagObj = this.resolvedSpec.tags[i];
       selectedPathObj = this.resolvedSpec.tags[i].paths.find(v => `${v.elementId}` === focusElId);
-
       if (selectedPathObj) {
         break;
       }
     }
-
     if (selectedPathObj) {
       focusedTemplate = wrapFocusedTemplate.call(this, _expandedEndpointTemplate.expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name));
     } else {
@@ -83,7 +65,6 @@ function focusedEndpointTemplate() {
       focusedTemplate = defaultContentTemplate.call(this);
     }
   }
-
   return focusedTemplate;
 }
 /* eslint-enable indent */

package/dist/lib/templates/mainBodyTemplate.js

@@ -2,30 +2,19 @@
 
 exports.__esModule = true;
 exports.default = mainBodyTemplate;
-
 var _lit = require("lit");
-
 var _focusedEndpointTemplate = _interopRequireDefault(require("./focused-endpoint-template.js"));
-
 var _overviewTemplate = _interopRequireDefault(require("./overview-template.js"));
-
 var _endpointTemplate = _interopRequireDefault(require("./endpoint-template.js"));
-
 var _serverTemplate = _interopRequireDefault(require("./server-template.js"));
-
 var _securitySchemeTemplate = _interopRequireDefault(require("./security-scheme-template.js"));
-
 var _navbarTemplate = _interopRequireDefault(require("./navbar-template.js"));
-
 var _advanceSearchTemplate = _interopRequireDefault(require("./advance-search-template.js"));
-
 var _theme = _interopRequireDefault(require("../utils/theme.js"));
-
 var _colorUtils = _interopRequireDefault(require("../utils/color-utils.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // Templates
+
 function mainBodyTemplate() {
   const newTheme = {
     bg1: _colorUtils.default.isValidHexColor(this.bgColor) ? this.bgColor : '',
@@ -39,8 +28,8 @@ function mainBodyTemplate() {
     navHoverBgColor: _colorUtils.default.isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: _colorUtils.default.isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : ''
   };
-  /* eslint-disable indent */
 
+  /* eslint-disable indent */
   return (0, _lit.html)` ${_theme.default.call(this, newTheme)} ${this.hideSearch ? '' : _advanceSearchTemplate.default.call(this)} <div id="the-main-body" class="body"> ${this.renderStyle === 'focused' && this.resolvedSpec ? _navbarTemplate.default.call(this) : ''} ${this.loading === true ? (0, _lit.html)`<slot name="loader"><div class="loader"></div></slot>` : (0, _lit.html)` <main class="main-content regular-font" part="section-main-content"> <slot></slot> <div id="operations-root" class="main-content-inner"> ${this.loadFailed === true ? (0, _lit.html)`<div style="text-align:center;margin:16px">Unable to load the Spec${this.specUrl ? ': ' : ''}<strong>${this.specUrl}</strong></div>` : (0, _lit.html)` <div class="operations-root" @click="${e => {
     this.handleHref(e);
   }}"> ${this.renderStyle === 'focused' ? (0, _lit.html)`${_focusedEndpointTemplate.default.call(this)}` : (0, _lit.html)` ${!this.hideInfo ? _overviewTemplate.default.call(this) : ''} ${!this.hideServerSelection ? _serverTemplate.default.call(this) : ''} ${!this.hideAuthentication ? _securitySchemeTemplate.default.call(this) : ''} <section id="section" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="custom-section"></slot> </section> ${_endpointTemplate.default.call(this)}`} </div> `}</div></main>`} </div> <slot name="footer"></slot> `;

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

@@ -4,33 +4,23 @@ exports.__esModule = true;
 exports.default = navbarTemplate;
 exports.expandCollapseAll = expandCollapseAll;
 exports.expandCollapseAllComponents = expandCollapseAllComponents;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _commonUtils = require("../utils/common-utils.js");
-
 var _index = require("../languages/index.js");
-
 var _endpointTemplate = require("./endpoint-template.js");
-
+var _componentsTemplate = require("./components-template.js");
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
-
   if (!tag) {
     return;
   }
-
   tag.expanded = !tag.expanded;
-
   if (tag.expanded && this.operationsCollapsed) {
     this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
   }
-
   this.requestUpdate();
 }
-
 function expandCollapseAll() {
   const expand = this.operationsCollapsed;
   this.operationsCollapsed = !expand;
@@ -39,7 +29,6 @@ function expandCollapseAll() {
   });
   this.requestUpdate();
 }
-
 function expandCollapseAllComponents() {
   const expand = this.componentsCollapsed;
   this.componentsCollapsed = !expand;
@@ -48,22 +37,22 @@ function expandCollapseAllComponents() {
   });
   this.requestUpdate();
 }
-/* eslint-disable indent */
-
 
+/* eslint-disable indent */
 function navbarTemplate() {
   var _this$resolvedSpec$co;
-
   return (0, _lit.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : (0, _lit.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${(0, _index.getI18nText)('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${(0, _index.getI18nText)('menu.search')} </button> </div> `} ${(0, _lit.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.resolvedSpec.info.title || (0, _index.getI18nText)('menu.overview')} </div>`} ${this.hideServerSelection ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> ${(0, _index.getI18nText)('menu.api-servers')} </div>`} ${this.hideAuthentication || !this.resolvedSpec.securitySchemes ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> ${(0, _index.getI18nText)('menu.authentication')} </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToCustomNavSectionTarget(e, false)}"></slot> <div class="sticky-scroll-element ${this.operationsCollapsed ? 'collapsed' : ''}" @click="${() => {
     expandCollapseAll.call(this);
   }}"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">${(0, _index.getI18nText)('menu.operations')}</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => !tag.paths.length && !this.matchPaths || tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))) ? (0, _lit.html)` <div class="toggle">▾</div>` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => !tag.paths.length && !this.matchPaths || tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))).map(tag => (0, _lit.html)` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? '' : 'collapsed'}"> ${tag.name === 'General ⦂' ? (0, _lit.html)`` : (0, _lit.html)` <div class="nav-bar-tag" id="link-${tag.elementId}" data-content-id="${tag.elementId}" @click="${() => {
     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"> <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> `;
+  }}"> <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 => {
+    const componentInfo = (0, _componentsTemplate.getComponentInfo)(component.componentKeyId);
+    return (0, _lit.html)` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${componentInfo.name.toLowerCase()}" id="link-cmp--${componentInfo.name.toLowerCase()}" @click="${e => {
+      _endpointTemplate.expandCollapseComponent.call(this, component);
+      this.scrollToEventTarget(e, false);
+    }}"> <div> ${componentInfo.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/dist/lib/templates/overview-template.js

@@ -2,17 +2,12 @@
 
 exports.__esModule = true;
 exports.default = overviewTemplate;
-
 var _lit = require("lit");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _marked = require("marked");
-
 var _index = require("../languages/index.js");
-
 /* eslint-disable indent */
 function overviewTemplate() {
-  return (0, _lit.html)` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? (0, _lit.html)` <slot name="overview"> <div id="api-title" part="label-overview-title" style="font-size:32px" class="section-padding"> ${this.resolvedSpec.info.title} ${!this.resolvedSpec.info.version ? '' : (0, _lit.html)` <span style="font-size:var(--font-size-small);font-weight:700"> ${this.resolvedSpec.info.version} </span>`} </div> <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px);margin-top:8px" class="section-padding"> ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email ? (0, _lit.html)`<span>${this.resolvedSpec.info.contact.name || (0, _index.getI18nText)('overview.email')}: <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a> </span>` : ''} ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.url ? (0, _lit.html)`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? (0, _lit.html)`<span>License: ${this.resolvedSpec.info.license.url ? (0, _lit.html)`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>` : this.resolvedSpec.info.license.name} </span>` : ''} ${this.resolvedSpec.info.termsOfService ? (0, _lit.html)`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${(0, _index.getI18nText)('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? (0, _lit.html)`${(0, _unsafeHtml.unsafeHTML)(`<div class="m-markdown regular-font section-padding">${(0, _marked.marked)(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> ` : ''} </section> `;
+  return (0, _lit.html)` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? (0, _lit.html)` <slot name="overview-header"></slot> <slot name="overview"> <div id="api-title" part="label-overview-title" style="font-size:32px" class="section-padding"> ${this.resolvedSpec.info.title} ${!this.resolvedSpec.info.version ? '' : (0, _lit.html)` <span style="font-size:var(--font-size-small);font-weight:700"> ${this.resolvedSpec.info.version} </span>`} </div> <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px);margin-top:8px" class="section-padding"> ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email ? (0, _lit.html)`<span>${this.resolvedSpec.info.contact.name || (0, _index.getI18nText)('overview.email')}: <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a> </span>` : ''} ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.url ? (0, _lit.html)`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? (0, _lit.html)`<span>License: ${this.resolvedSpec.info.license.url ? (0, _lit.html)`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>` : this.resolvedSpec.info.license.name} </span>` : ''} ${this.resolvedSpec.info.termsOfService ? (0, _lit.html)`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${(0, _index.getI18nText)('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? (0, _lit.html)`${(0, _unsafeHtml.unsafeHTML)(`<div class="m-markdown regular-font section-padding">${(0, _marked.marked)(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> <slot name="overview-footer"></slot> ` : ''} </section> `;
 }
 /* eslint-enable indent */