openapi-explorer 2.1.654 → 2.1.658

package/dist/es/react.js

@@ -11,19 +11,19 @@ export function reactEventListener({
 }, eventName, functionCallback) {
   const targetElement = window;
   useEffect(() => {
-    targetElement.addEventListener(eventName, functionCallback); // This is an effect that requires cleanup when the component using this
+    targetElement.addEventListener(eventName, functionCallback);
+    // This is an effect that requires cleanup when the component using this
     // custom hook unmounts:
     // https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
-
     return () => {
       // Check if the event functionCallback we were given was a debounced or throttled
       // event functionCallback, if it is, cancel any future events
       // https://github.com/niksy/throttle-debounce#cancelling
       if (functionCallback !== null && functionCallback !== void 0 && functionCallback.cancel) {
         functionCallback.cancel();
-      } // Remove the event functionCallbacks
-
+      }
 
+      // Remove the event functionCallbacks
       if (targetElement !== null && targetElement !== void 0 && targetElement.removeEventListener) {
         targetElement.removeEventListener(eventName, functionCallback);
       }

package/dist/es/styles/input-styles.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-/* eslint-disable max-len */
 
+/* eslint-disable max-len */
 export default css`.m-btn{border-radius:var(--border-radius);font-weight:600;display:inline-block;padding:6px 16px;font-size:var(--font-size-small);outline:0;line-height:1;text-align:center;white-space:nowrap;border:2px solid var(--primary-color);background-color:transparent;transition:background-color .2s;user-select:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.m-btn.primary{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.outline-primary{color:var(--primary-color);background-color:var(--bg);border:1px solid var(--bg)}.m-btn.outline-primary:hover{border:1px solid var(--bg)}.m-btn.thin-border{border-width:1px}.m-btn.large{padding:8px 14px}.m-btn.small{padding:5px 12px}.m-btn.tiny{padding:5px 6px}.m-btn.circle{border-radius:50%}.m-btn:hover{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.nav{border:2px solid var(--secondary-color)}.m-btn.nav:hover{background-color:var(--secondary-color)}.m-btn:disabled{background-color:var(--bg3);color:var(--fg3);border-color:var(--fg3);cursor:progress;opacity:.4}button,input,select,textarea{color:var(--fg);outline:0;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius)}button{font-family:var(--font-regular)}input[type=file],input[type=password],input[type=text],select,textarea{font-family:var(--font-regular);font-weight:400;font-size:var(--font-size-small);transition:border .2s;padding:6px 5px}select{font-family:var(--font-regular);padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");background-position:calc(100% - 5px) center;background-repeat:no-repeat;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}select:hover{border-color:var(--primary-color)}input[type=password]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--placeholder-color);opacity:1}input[type=password]:active,input[type=password]:focus,input[type=text]:active,input[type=text]:focus,select:focus,textarea:active,textarea:focus{border:1px solid var(--primary-color)}input[type=file]{font-family:var(--font-regular);padding:2px;cursor:pointer;border:1px solid var(--primary-color);min-height:calc(var(--font-size-small) + 18px)}input[type=file]::-webkit-file-upload-button{font-family:var(--font-regular);font-size:var(--font-size-small);outline:0;cursor:pointer;padding:3px 8px;border:1px solid var(--primary-color);background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:var(--border-radius);-webkit-appearance:none}pre,textarea{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--input-bg)}pre::-webkit-scrollbar,textarea::-webkit-scrollbar{width:8px;height:8px}pre::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:var(--input-bg)}pre::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--border-color)}.link{font-size:var(--font-size-small);text-decoration:underline;color:var(--blue);font-family:var(--font-mono);margin-bottom:2px}input[type=checkbox]:focus{outline:0}input[type=checkbox]{appearance:none;display:inline-block;background-color:var(--light-bg);border-radius:9px;cursor:pointer;height:18px;position:relative;transition:border .15s,padding .25s;min-width:36px;width:36px;vertical-align:top}input[type=checkbox]:after{position:absolute;background-color:var(--bg);border-radius:8px;content:'';top:0;left:0;right:16px;display:block;height:16px;transition:left .25s .1s,right .15s .175s}input[type=checkbox]:checked{box-shadow:inset 0 0 0 13px var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{border:1px solid var(--primary-color);left:16px;right:1px;transition:border .25s,left .15s .25s,right .25s .175s}.oauth-client-input{display:flex;align-items:center;flex-grow:1;width:300px;max-width:300px;margin-top:1rem}input.oauth-client-secret{flex-grow:1;max-width:300px}`;

package/dist/es/styles/schema-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,:after,:before{box-sizing:border-box}.no-select{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.binary,.byte,.date,.date-time,.datetime,.emai,.email,.host,.hostname,.ipv4,.pass,.password,.stri,.string,.uri,.url,.uuid{color:var(--green)}.blue,.deci,.decimal,.doub,.double,.floa,.float,.int3,.int32,.int6,.int64,.inte,.integer,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.cons,.const,.enum{color:var(--purple)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:var(--secondary-color);flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}`;
+export default css`*,:after,:before{box-sizing:border-box}.no-select{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.binary,.byte,.date,.date-time,.datetime,.emai,.email,.host,.hostname,.ipv4,.pass,.password,.stri,.string,.uri,.url,.uuid{color:var(--green)}.blue,.deci,.decimal,.doub,.double,.floa,.float,.int3,.int32,.int6,.int64,.inte,.integer,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.cons,.const,.enum{color:var(--purple)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:var(--secondary-color);flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.expanded-endpoint-component>h2:hover,.schema-link:hover{cursor:pointer;text-decoration:underline}`;

package/dist/es/templates/advance-search-template.js

@@ -1,13 +1,12 @@
 import { html } from 'lit';
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export default function searchByPropertiesModalTemplate() {
   const keyDownEventListenerAdvancedSearch = e => {
     if ((e.detail && e.detail.code || e.code) === 'Escape') {
       this.showAdvancedSearchDialog = false;
     }
   };
-
   const closeAdvancedSearchDialog = () => {
     // Trigger the event to force it to be removed from the DOM
     document.dispatchEvent(new CustomEvent('keydown', {
@@ -19,7 +18,6 @@ export default function searchByPropertiesModalTemplate() {
       once: true
     });
   };
-
   document.addEventListener('keydown', keyDownEventListenerAdvancedSearch, {
     once: true
   });
@@ -27,9 +25,7 @@ export default function searchByPropertiesModalTemplate() {
     closeAdvancedSearchDialog();
   }}" part="btn btn-outline">&times;</button> </header> <div id="advanced-search-modal" class="dialog-box-content"> <span class="advanced-search-options"> <div class="advanced-search-dialog-input"> <input id="advanced-search-dialog-input" type="text" part="textbox textbox-search-dialog" placeholder="search text..." spellcheck="false" @keyup="${e => this.onAdvancedSearch(e)}"> </div> <div class="advanced-search-locations"> <div> <input style="cursor:pointer" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-path" checked="checked" @change="${e => this.onAdvancedSearch(e)}"> <label style="cursor:pointer" for="search-api-path"> API Path </label> </div> <div> <input style="cursor:pointer" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-descr" checked="checked" @change="${e => this.onAdvancedSearch(e)}"> <label style="cursor:pointer" for="search-api-descr"> API Description </label> </div> <div> <input style="cursor:pointer" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-params" @change="${e => this.onAdvancedSearch(e)}"> <label style="cursor:pointer" for="search-api-params"> Request Parameters </label> </div> <div> <input style="cursor:pointer" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-request-body" @change="${e => this.onAdvancedSearch(e)}"> <label style="cursor:pointer" for="search-api-request-body"> Request Body </label> </div> <div> <input style="cursor:pointer" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-resp-descr" @change="${e => this.onAdvancedSearch(e)}"> <label style="cursor:pointer" for="search-api-resp-descr"> Response Description </label> </div> </div> </span> <div class="advanced-search-results"> ${this.advancedSearchMatches && this.advancedSearchMatches.map(path => html` <div class="mono-font small-font-size hover-bg" tabindex="0" style="padding:5px;cursor:pointer;border-bottom:1px solid var(--light-border-color);${path.deprecated ? 'filter:opacity(0.5);' : ''}" data-content-id="${path.elementId}" @click="${e => {
     this.matchPaths = ''; // clear quick filter if applied
-
     closeAdvancedSearchDialog(); // Hide Search Dialog
-
     this.requestUpdate();
     this.scrollToEventTarget(e, true);
   }}"> <span class="upper bold-text method-fg ${path.method}">${path.method}</span> <span>${path.path}</span> - <span class="regular-font gray-text">${path.summary}</span> </div> `)} </div> </div> </div> </div>` : ''}`;

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

@@ -1,7 +1,7 @@
 import { html } from 'lit';
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export default function callbackTemplate(callbacks) {
-  return html` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => html` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => html` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => html` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="false" 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> <api-response callback="true" .responses="${method[1] && method[1].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}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
+  return html` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => html` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => html` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => html` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="false" 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> <api-response callback="true" .responses="${method[1] && method[1].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}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
 }
 /* eslint-enable indent */

package/dist/es/templates/code-samples-template.js

@@ -1,12 +1,11 @@
 import { html } from 'lit';
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export default function codeSamplesTemplate(xCodeSamples) {
   return html` <section class="table-title top-gap"> CODE SAMPLES  <div class="tab-panel col" @click="${e => {
     if (!e.target.classList.contains('tab-btn')) {
       return;
     }
-
     const clickedTab = e.target.dataset.tab;
     const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];
     const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];
@@ -18,7 +17,6 @@ export default function codeSamplesTemplate(xCodeSamples) {
     // We skip the first line because it could be there is no padding there, but padding on the next lines which needs to be removed
     const paddingToRemove = Math.min(...v.source.split('\n').slice(1).map(l => {
       var _l$match;
-
       return (_l$match = l.match(/^(\s*).*$/m)) === null || _l$match === void 0 ? void 0 : _l$match[1].length;
     }).filter(l => typeof l !== 'undefined'));
     const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);

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

@@ -4,15 +4,52 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import '../components/schema-tree.js';
-
+import { getI18nText } from '../languages/index.js';
 function componentBodyTemplate(sComponent) {
   const formdataPartSchema = schemaInObjectNotation(sComponent.component, {
     includeNulls: this.includeNulls
   });
-  return html` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}" @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? html`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
+  return html` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2 @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}">${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? html`<schema-table .data="${formdataPartSchema}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
+}
+export function getComponentInfo(componentKeyId) {
+  const infoDictionary = {
+    schemas: {
+      name: getI18nText('menu.schemas'),
+      description: ''
+    },
+    responses: {
+      name: 'Responses',
+      description: 'Describes responses from an API Operation, including design-time, static links to operations based on the response.'
+    },
+    parameters: {
+      name: 'Parameters',
+      description: 'Describes operation parameters. A unique parameter is defined by a combination of a name and location.'
+    },
+    examples: {
+      name: 'Examples',
+      description: 'List of Examples for operations, can be requests, responses and objects examples.'
+    },
+    headers: {
+      name: 'Headers',
+      description: 'Headers follows the structure of the Parameters but they are explicitly in "header"'
+    },
+    links: {
+      name: 'Links',
+      description: 'Links represent a possible design-time link for a response. The presence of a link does not guarantee the caller\'s ability to successfully invoke it, rather it provides a known relationship and traversal mechanism between responses and other operations.'
+    },
+    callbacks: {
+      name: 'Callbacks',
+      description: 'A map of possible out-of band callbacks related to the parent operation. Each value in the map is a Path Item Object that describes a set of requests that may be initiated by the API provider and the expected responses. The key value used to identify the path item object is an expression, evaluated at runtime, that identifies a URL to use for the callback operation.'
+    }
+  };
+  return infoDictionary[componentKeyId] || {
+    name: componentKeyId
+  };
 }
-
 export default function componentsTemplate() {
-  return html` ${this.resolvedSpec.components.map(component => html` <div id="cmp--${component.name.toLowerCase()}" class="regular-font section-gap--focused-mode observe-me" style="padding-bottom:0"> <div class="title tag">${component.name}</div> <div class="regular-font-size"> ${unsafeHTML(`<div class='m-markdown regular-font'>${marked(component.description ? component.description : '')}</div>`)} </div> </div> <div class="regular-font section-gap--focused-mode" style="padding-top:0"> ${component.subComponents.filter(c => c.expanded).map(sComponent => componentBodyTemplate.call(this, sComponent))} </div> `)} `;
+  return html` ${this.resolvedSpec.components.map(component => {
+    const componentInfo = getComponentInfo(component.componentKeyId);
+    return html` <div id="cmp--${componentInfo.name.toLowerCase()}" class="regular-font section-gap--focused-mode observe-me" style="padding-bottom:0"> <div class="title tag">${componentInfo.name}</div> <div class="regular-font-size"> ${unsafeHTML(`<div class='m-markdown regular-font'>${marked(componentInfo.description ? componentInfo.description : '')}</div>`)} </div> </div> <div class="regular-font section-gap--focused-mode" style="padding-top:0"> ${component.subComponents.filter(c => c.expanded).map(sComponent => componentBodyTemplate.call(this, sComponent))} </div> `;
+  })}; } `;
 }
 /* eslint-enable indent */

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

@@ -7,31 +7,27 @@ import codeSamplesTemplate from './code-samples-template.js';
 import callbackTemplate from './callback-template.js';
 import { pathSecurityTemplate } from './security-scheme-template.js';
 import { getCurrentElement, pathIsInSearch, replaceState } from '../utils/common-utils.js';
-
 function toggleExpand(path) {
   if (path.expanded) {
     path.expanded = false;
     replaceState(null);
   } else {
     path.expanded = true;
-    this.emitOperationChangedEvent(path.elementId); // Toggle all the other ones off
+    this.emitOperationChangedEvent(path.elementId);
 
+    // Toggle all the other ones off
     this.resolvedSpec.tags.forEach(t => t.paths.filter(p => p.elementId !== path.elementId).forEach(p => p.expanded = false));
-
     if (path.elementId !== getCurrentElement()) {
       replaceState(path.elementId);
     }
   }
-
   this.requestUpdate();
 }
-
 function toggleTag(tagElement, tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
   tag.expanded = !tag.expanded;
   this.requestUpdate();
 }
-
 export function expandCollapseAll(currentElement, expand) {
   this.resolvedSpec.tags.forEach(t => t.expanded = expand);
   this.requestUpdate();
@@ -40,38 +36,31 @@ export function expandCollapseComponent(component) {
   component.expanded = !component.expanded;
   this.requestUpdate();
 }
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 function endpointHeadTemplate(path) {
   return html` <summary @click="${e => {
     toggleExpand.call(this, path, e);
   }}" class="endpoint-head ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}"> <div class="method ${path.method}"><span style="line-height:1">${path.method}</span></div> <div style="${path.deprecated ? 'text-decoration: line-through;' : ''}"> ${this.usePathInNavBar ? html`<div class="path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div>` : html`<div class="">${path.summary || path.shortSummary}</div>`} ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (Webhook) </span>` : ''} </div> </summary> `;
 }
-
 function endpointBodyTemplate(path) {
   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(', '); // Filter API Keys that are non-empty and are applicable to the the path
-
+  const accept = [...acceptContentTypes].join(', ');
+  // Filter API Keys that are non-empty and are applicable to the the path
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => {
     var _path$security;
-
     return v.finalKeyValue && ((_path$security = path.security) === null || _path$security === void 0 ? void 0 : _path$security.some(ps => ps[v.apiKeyId]));
   }) || [];
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate(path.xCodeSamples) : '';
-  return html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : '' : html` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? 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}&nbsp;</span> <span style="display:flex;flex-wrap:wrap" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" 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)}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" 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> </div> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" 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 html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : '' : html` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? 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}&nbsp;</span> <span style="display:flex;flex-wrap:wrap" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" 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)}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" 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> </div> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" 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>`;
 }
-
 export default function endpointTemplate() {
   return html` <div style="display:flex;justify-content:flex-end;padding-right:1rem;font-size:14px;margin-top:16px"> <span @click="${e => expandCollapseAll.call(this, e, true)}" style="color:var(--primary-color);cursor:pointer">Expand</span> &nbsp;|&nbsp; <span @click="${e => expandCollapseAll.call(this, e, false)}" style="color:var(--primary-color);cursor:pointer">Collapse</span> </div> ${(this.resolvedSpec && this.resolvedSpec.tags || []).map(tag => html` <div class="regular-font method-section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}"> <div class="section-tag-header" @click="${e => toggleTag.call(this, e, tag.elementId)}"> <div id="${tag.elementId}" class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div> </div> <div class="section-tag-body"> <slot name="${tag.elementId}"></slot> ${tag.description ? html` <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px"> ${unsafeHTML(marked(tag.description || ''))} </div>` : ''} ${tag.paths.filter(v => pathIsInSearch(this.matchPaths, v)).map(path => html` <section id="${path.elementId}" class="m-endpoint regular-font ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}"> ${endpointHeadTemplate.call(this, path)} ${path.expanded ? endpointBodyTemplate.call(this, path) : ''} </section>`)} </div> </div> `)}`;
 }

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

@@ -6,26 +6,23 @@ import codeSamplesTemplate from './code-samples-template.js';
 import callbackTemplate from './callback-template.js';
 import '../components/api-request.js';
 import '../components/api-response.js';
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export 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.call(this, path.xCodeSamples) : '';
-  return html` ${this.renderStyle === 'read' ? 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 ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? 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 ? 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 ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(marked(path.externalDocs.description || ''))} <a href="${path.externalDocs.url}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${unsafeHTML(marked(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${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.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 html` ${this.renderStyle === 'read' ? 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 ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? 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 ? 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 ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(marked(path.externalDocs.description || ''))} <a href="${path.externalDocs.url}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${unsafeHTML(marked(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${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.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>`;
 }
 export function expandedTagTemplate(tagId, subsectionFullId) {
   const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);

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

@@ -6,33 +6,27 @@ import componentsTemplate from './components-template.js';
 import overviewTemplate from './overview-template.js';
 import serverTemplate from './server-template.js';
 import securitySchemeTemplate from './security-scheme-template.js';
-
 function wrapFocusedTemplate(templateToWrap) {
   return 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.call(this);
   }
-
   const selectedTagObj = this.resolvedSpec.tags[0];
   const selectedPathObj = selectedTagObj === null || selectedTagObj === void 0 ? void 0 : selectedTagObj.paths[0];
   return selectedPathObj ? wrapFocusedTemplate(expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name)) : wrapFocusedTemplate('');
 }
-
 export default 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.call(this);
   } else if (focusElId === 'auth' && !this.hideAuthentication) {
@@ -46,7 +40,6 @@ export default 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 = expandedTagTemplate.call(this, idToFocus, focusElId);
     } else {
@@ -56,12 +49,10 @@ export default 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, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name));
     } else {
@@ -69,7 +60,6 @@ export default function focusedEndpointTemplate() {
       focusedTemplate = defaultContentTemplate.call(this);
     }
   }
-
   return focusedTemplate;
 }
 /* eslint-enable indent */

package/dist/es/templates/mainBodyTemplate.js

@@ -1,5 +1,6 @@
-import { html } from 'lit'; // Templates
+import { html } from 'lit';
 
+// Templates
 import focusedEndpointTemplate from './focused-endpoint-template.js';
 import overviewTemplate from './overview-template.js';
 import endpointTemplate from './endpoint-template.js';
@@ -22,8 +23,8 @@ export default function mainBodyTemplate() {
     navHoverBgColor: ColorUtils.isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: ColorUtils.isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : ''
   };
-  /* eslint-disable indent */
 
+  /* eslint-disable indent */
   return html` ${SetTheme.call(this, newTheme)} ${this.hideSearch ? '' : advancedSearchTemplate.call(this)} <div id="the-main-body" class="body"> ${this.renderStyle === 'focused' && this.resolvedSpec ? navbarTemplate.call(this) : ''} ${this.loading === true ? html`<slot name="loader"><div class="loader"></div></slot>` : html` <main class="main-content regular-font" part="section-main-content"> <slot></slot> <div id="operations-root" class="main-content-inner"> ${this.loadFailed === true ? html`<div style="text-align:center;margin:16px">Unable to load the Spec${this.specUrl ? ': ' : ''}<strong>${this.specUrl}</strong></div>` : html` <div class="operations-root" @click="${e => {
     this.handleHref(e);
   }}"> ${this.renderStyle === 'focused' ? html`${focusedEndpointTemplate.call(this)}` : html` ${!this.hideInfo ? overviewTemplate.call(this) : ''} ${!this.hideServerSelection ? serverTemplate.call(this) : ''} ${!this.hideAuthentication ? securitySchemeTemplate.call(this) : ''} <section id="section" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="custom-section"></slot> </section> ${endpointTemplate.call(this)}`} </div> `}</div></main>`} </div> <slot name="footer"></slot> `;

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

@@ -3,23 +3,18 @@ import { marked } from 'marked';
 import { componentIsInSearch, pathIsInSearch } from '../utils/common-utils.js';
 import { getI18nText } from '../languages/index.js';
 import { expandCollapseComponent } from './endpoint-template.js';
-
+import { getComponentInfo } from './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();
 }
-
 export function expandCollapseAll() {
   const expand = this.operationsCollapsed;
   this.operationsCollapsed = !expand;
@@ -36,20 +31,22 @@ export function expandCollapseAllComponents() {
   });
   this.requestUpdate();
 }
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export default function navbarTemplate() {
   var _this$resolvedSpec$co;
-
   return html` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : 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="${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}"> ${getI18nText('menu.search')} </button> </div> `} ${html`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : html`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.resolvedSpec.info.title || getI18nText('menu.overview')} </div>`} ${this.hideServerSelection ? '' : html`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> ${getI18nText('menu.api-servers')} </div>`} ${this.hideAuthentication || !this.resolvedSpec.securitySchemes ? '' : html`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> ${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">${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 => pathIsInSearch(this.matchPaths, path))) ? html` <div class="toggle">▾</div>` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => !tag.paths.length && !this.matchPaths || tag.paths.some(path => pathIsInSearch(this.matchPaths, path))).map(tag => html` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? '' : 'collapsed'}"> ${tag.name === 'General ⦂' ? html`` : 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 => html` <div class="nav-bar-h${header.depth}" id="link-${tag.elementId}--${new marked.Slugger().slug(header.text)}" data-content-id="${tag.elementId}--${new marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)} </div> <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => pathIsInSearch(this.matchPaths, v)).map(p => html` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? html`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${getI18nText('menu.components')}</div> </slot> </div> </div> ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))).map(component => html` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => {
-    expandCollapseComponent.call(this, component);
-    this.scrollToEventTarget(e, false);
-  }}"> <div> ${component.name} </div> <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div> </div> </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => componentIsInSearch(this.matchPaths, s)).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`)}` : ''} </nav>`} </nav> `;
+  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? html`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${getI18nText('menu.components')}</div> </slot> </div> </div> ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))).map(component => {
+    const componentInfo = getComponentInfo(component.componentKeyId);
+    return 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 => {
+      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 => componentIsInSearch(this.matchPaths, s)).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`;
+  })}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

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

@@ -2,9 +2,9 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import { getI18nText } from '../languages/index.js';
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 export default function overviewTemplate() {
-  return html` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? 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 ? '' : 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 ? html`<span>${this.resolvedSpec.info.contact.name || 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 ? 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 ? html`<span>License: ${this.resolvedSpec.info.license.url ? 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 ? html`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${getI18nText('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? html`${unsafeHTML(`<div class="m-markdown regular-font section-padding">${marked(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> ` : ''} </section> `;
+  return html` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? 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 ? '' : 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 ? html`<span>${this.resolvedSpec.info.contact.name || 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 ? 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 ? html`<span>License: ${this.resolvedSpec.info.license.url ? 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 ? html`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${getI18nText('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? html`${unsafeHTML(`<div class="m-markdown regular-font section-padding">${marked(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> <slot name="overview-footer"></slot> ` : ''} </section> `;
 }
 /* eslint-enable indent */