openapi-explorer 0.9.344 → 0.9.346

package/dist/es/openapi-explorer.js

@@ -22,7 +22,7 @@ import TabStyles from './styles/tab-styles';
 import NavStyles from './styles/nav-styles';
 import InfoStyles from './styles/info-styles';
 import advancedSearchStyles from './styles/advanced-search-styles';
-import { advancedSearch, getCurrentElement, pathIsInSearch, replaceState, sleep, componentIsInSearch } from './utils/common-utils';
+import { advancedSearch, getCurrentElement, replaceState, sleep } from './utils/common-utils';
 import ProcessSpec from './utils/spec-parser';
 import responsiveViewMainBodyTemplate from './templates/responsiveViewMainBodyTemplate';
 import apiRequestStyles from './styles/api-request-styles';
@@ -74,10 +74,16 @@ export default class OpenApiExplorer extends LitElement {
       layout: {
         type: String
       },
-      operationsCollapsed: {
+      collapsed: {
         type: Boolean,
         attribute: 'collapse'
       },
+      operationsCollapsed: {
+        type: Boolean
+      },
+      componentsCollapsed: {
+        type: Boolean
+      },
       defaultSchemaTab: {
         type: String,
         attribute: 'default-schema-tab'
@@ -251,6 +257,8 @@ export default class OpenApiExplorer extends LitElement {
     }
 
     this.renderStyle = 'focused';
+    this.operationsCollapsed = this.collapsed;
+    this.componentsCollapsed = this.collapsed;
     this.explorerLocation = this.explorerLocation || getCurrentElement();
 
     if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) {
@@ -395,29 +403,16 @@ export default class OpenApiExplorer extends LitElement {
       }, 0);
     }
 
+    if (name === 'collapsed') {
+      this.operationsCollapsed = newVal;
+      this.componentsCollapsed = newVal;
+    }
+
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
   onSearchChange(e) {
-    this.operationsCollapsed = false;
     this.matchPaths = e.target.value;
-    this.resolvedSpec.tags.forEach(tag => tag.paths.filter(v => {
-      if (this.matchPaths) {
-        // v.expanded = false;
-        if (pathIsInSearch(this.matchPaths, v)) {
-          tag.expanded = true;
-        }
-      }
-    }));
-    this.resolvedSpec.components.forEach(component => {
-      component.subComponents.forEach(subComponent => {
-        subComponent.expanded = false;
-
-        if (!this.matchPaths || componentIsInSearch(this.matchPaths, subComponent)) {
-          subComponent.expanded = true;
-        }
-      });
-    });
     this.requestUpdate();
   }
 
@@ -425,11 +420,6 @@ export default class OpenApiExplorer extends LitElement {
     const searchEl = this.shadowRoot.getElementById('nav-bar-search');
     searchEl.value = '';
     this.matchPaths = '';
-    this.resolvedSpec.components.forEach(component => {
-      component.subComponents.forEach(v => {
-        v.expanded = true;
-      });
-    });
   }
 
   async onShowSearchModalClicked() {
@@ -516,6 +506,10 @@ export default class OpenApiExplorer extends LitElement {
       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

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

@@ -83,12 +83,6 @@ 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, 'expand-all')}" style="color:var(--primary-color);cursor:pointer">Expand</span> &nbsp;|&nbsp; <span @click="${e => expandCollapseAll.call(this, e, 'collapse-all')}" 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" style="padding-bottom:12px">
             ${unsafeHTML(marked(tag.description || ''))}
-          </div>` : ''} ${tag.paths.filter(v => {
-    if (this.matchPaths) {
-      return pathIsInSearch(this.matchPaths, v);
-    }
-
-    return true;
-  }).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> `)}`;
+          </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> `)}`;
 }
 /* eslint-enable indent */

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

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import { pathIsInSearch } from '../utils/common-utils';
+import { componentIsInSearch, pathIsInSearch } from '../utils/common-utils';
 
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
@@ -20,27 +20,36 @@ function onExpandCollapse(tagId) {
 export function expandCollapseAll() {
   const expand = this.operationsCollapsed;
   this.operationsCollapsed = !expand;
-  this.resolvedSpec.tags.forEach(t => {
-    t.expanded = expand;
+  this.resolvedSpec.tags.forEach(tag => {
+    tag.expanded = expand;
   });
+  this.requestUpdate();
+}
+export function expandCollapseAllComponents() {
+  const expand = this.componentsCollapsed;
+  this.componentsCollapsed = !expand;
+  this.resolvedSpec.components.forEach(component => {
+    component.expanded = expand;
+  });
+  this.requestUpdate();
 }
 /* eslint-disable indent */
 
 export default function navbarTemplate() {
-  return html` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : html` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : html` <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="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? html` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : html` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${html`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : html`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : html`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : html`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToEventTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 ? html` ${this.operationsCollapsed ? html`<div @click="${e => {
-    expandCollapseAll.call(this, e);
-  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : html`<div @click="${e => {
-    expandCollapseAll.call(this, e);
-  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => tag.paths.filter(path => pathIsInSearch(this.matchPaths, path)).length).map(tag => html` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? '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>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </div> </div> `} <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => {
-    if (this.matchPaths) {
-      return pathIsInSearch(this.matchPaths, v);
-    }
+  var _this$resolvedSpec$co;
 
-    return true;
-  }).map(p => html` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
+  return html` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : html` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : html` <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="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? html` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : html` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${html`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : html`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : html`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : html`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToEventTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => tag.paths.some(path => pathIsInSearch(this.matchPaths, path))) ? html` ${this.operationsCollapsed ? html`<div @click="${() => {
+    expandCollapseAll.call(this);
+  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : html`<div @click="${() => {
+    expandCollapseAll.call(this);
+  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => 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 ? '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>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </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 === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? html`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && !this.hideComponents ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? html` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).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>`)}` : '')}` : ''} </nav>`} </nav> `;
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? html`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </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">COMPONENTS</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))) ? html` <div style="" part="navbar-components-header-collapse"> ${this.componentsCollapsed ? html`<div @click="${() => {
+    expandCollapseAllComponents.call(this);
+  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : html`<div @click="${() => {
+    expandCollapseAllComponents.call(this);
+  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}</div>` : ''} </div> </div>  ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => componentIsInSearch(this.matchPaths, s))).map(component => html` <div class="nav-bar-tag-and-paths ${component.expanded ? 'expanded' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> <div class="nav-bar-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>`)}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

package/dist/es/utils/common-utils.js

@@ -41,9 +41,13 @@ export function getBaseUrlFromUrl(url) {
   return `${pathArray[0]}//${pathArray[2]}`;
 }
 export function componentIsInSearch(searchVal, component) {
-  return component.name.toLowerCase().includes(searchVal.toLowerCase());
+  return !searchVal || component.name.toLowerCase().includes(searchVal.toLowerCase());
 }
 export function pathIsInSearch(searchVal, path) {
+  if (!searchVal) {
+    return true;
+  }
+
   const stringToSearch = `${path.method} ${path.path} ${path.summary || path.description || ''} ${path.operationId || ''}`.toLowerCase();
   return stringToSearch.includes(searchVal.toLowerCase());
 }

package/dist/lib/openapi-explorer.js

@@ -110,10 +110,16 @@ class OpenApiExplorer extends _litElement.LitElement {
       layout: {
         type: String
       },
-      operationsCollapsed: {
+      collapsed: {
         type: Boolean,
         attribute: 'collapse'
       },
+      operationsCollapsed: {
+        type: Boolean
+      },
+      componentsCollapsed: {
+        type: Boolean
+      },
       defaultSchemaTab: {
         type: String,
         attribute: 'default-schema-tab'
@@ -287,6 +293,8 @@ class OpenApiExplorer extends _litElement.LitElement {
     }
 
     this.renderStyle = 'focused';
+    this.operationsCollapsed = this.collapsed;
+    this.componentsCollapsed = this.collapsed;
     this.explorerLocation = this.explorerLocation || (0, _commonUtils.getCurrentElement)();
 
     if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) {
@@ -432,29 +440,16 @@ class OpenApiExplorer extends _litElement.LitElement {
       }, 0);
     }
 
+    if (name === 'collapsed') {
+      this.operationsCollapsed = newVal;
+      this.componentsCollapsed = newVal;
+    }
+
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
   onSearchChange(e) {
-    this.operationsCollapsed = false;
     this.matchPaths = e.target.value;
-    this.resolvedSpec.tags.forEach(tag => tag.paths.filter(v => {
-      if (this.matchPaths) {
-        // v.expanded = false;
-        if ((0, _commonUtils.pathIsInSearch)(this.matchPaths, v)) {
-          tag.expanded = true;
-        }
-      }
-    }));
-    this.resolvedSpec.components.forEach(component => {
-      component.subComponents.forEach(subComponent => {
-        subComponent.expanded = false;
-
-        if (!this.matchPaths || (0, _commonUtils.componentIsInSearch)(this.matchPaths, subComponent)) {
-          subComponent.expanded = true;
-        }
-      });
-    });
     this.requestUpdate();
   }
 
@@ -462,11 +457,6 @@ class OpenApiExplorer extends _litElement.LitElement {
     const searchEl = this.shadowRoot.getElementById('nav-bar-search');
     searchEl.value = '';
     this.matchPaths = '';
-    this.resolvedSpec.components.forEach(component => {
-      component.subComponents.forEach(v => {
-        v.expanded = true;
-      });
-    });
   }
 
   async onShowSearchModalClicked() {
@@ -553,6 +543,10 @@ class OpenApiExplorer extends _litElement.LitElement {
       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

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

@@ -100,12 +100,6 @@ function endpointTemplate() {
   return (0, _litElement.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, 'expand-all')}" style="color:var(--primary-color);cursor:pointer">Expand</span> &nbsp;|&nbsp; <span @click="${e => expandCollapseAll.call(this, e, 'collapse-all')}" style="color:var(--primary-color);cursor:pointer">Collapse</span> </div> ${(this.resolvedSpec && this.resolvedSpec.tags || []).map(tag => (0, _litElement.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" style="padding-bottom:12px">
             ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(tag.description || ''))}
-          </div>` : ''} ${tag.paths.filter(v => {
-    if (this.matchPaths) {
-      return (0, _commonUtils.pathIsInSearch)(this.matchPaths, v);
-    }
-
-    return true;
-  }).map(path => (0, _litElement.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> `)}`;
+          </div>` : ''} ${tag.paths.filter(v => (0, _commonUtils.pathIsInSearch)(this.matchPaths, v)).map(path => (0, _litElement.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> `)}`;
 }
 /* eslint-enable indent */

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

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.default = navbarTemplate;
 exports.expandCollapseAll = expandCollapseAll;
+exports.expandCollapseAllComponents = expandCollapseAllComponents;
 
 var _litElement = require("lit-element");
 
@@ -27,28 +28,38 @@ function onExpandCollapse(tagId) {
 function expandCollapseAll() {
   const expand = this.operationsCollapsed;
   this.operationsCollapsed = !expand;
-  this.resolvedSpec.tags.forEach(t => {
-    t.expanded = expand;
+  this.resolvedSpec.tags.forEach(tag => {
+    tag.expanded = expand;
   });
+  this.requestUpdate();
+}
+
+function expandCollapseAllComponents() {
+  const expand = this.componentsCollapsed;
+  this.componentsCollapsed = !expand;
+  this.resolvedSpec.components.forEach(component => {
+    component.expanded = expand;
+  });
+  this.requestUpdate();
 }
 /* eslint-disable indent */
 
 
 function navbarTemplate() {
-  return (0, _litElement.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : (0, _litElement.html)` <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="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? (0, _litElement.html)` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : (0, _litElement.html)` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${(0, _litElement.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToEventTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 ? (0, _litElement.html)` ${this.operationsCollapsed ? (0, _litElement.html)`<div @click="${e => {
-    expandCollapseAll.call(this, e);
-  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${e => {
-    expandCollapseAll.call(this, e);
-  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => tag.paths.filter(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path)).length).map(tag => (0, _litElement.html)` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}"> ${tag.name === 'General ⦂' ? (0, _litElement.html)`` : (0, _litElement.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>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </div> </div> `} <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => {
-    if (this.matchPaths) {
-      return (0, _commonUtils.pathIsInSearch)(this.matchPaths, v);
-    }
+  var _this$resolvedSpec$co;
 
-    return true;
-  }).map(p => (0, _litElement.html)` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
+  return (0, _litElement.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : (0, _litElement.html)` <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="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? (0, _litElement.html)` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : (0, _litElement.html)` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${(0, _litElement.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToEventTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))) ? (0, _litElement.html)` ${this.operationsCollapsed ? (0, _litElement.html)`<div @click="${() => {
+    expandCollapseAll.call(this);
+  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${() => {
+    expandCollapseAll.call(this);
+  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))).map(tag => (0, _litElement.html)` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}"> ${tag.name === 'General ⦂' ? (0, _litElement.html)`` : (0, _litElement.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>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </div> </div> `} <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => (0, _commonUtils.pathIsInSearch)(this.matchPaths, v)).map(p => (0, _litElement.html)` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && !this.hideComponents ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? (0, _litElement.html)` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => (0, _litElement.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>`)}` : '')}` : ''} </nav>`} </nav> `;
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">COMPONENTS</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))) ? (0, _litElement.html)` <div style="" part="navbar-components-header-collapse"> ${this.componentsCollapsed ? (0, _litElement.html)`<div @click="${() => {
+    expandCollapseAllComponents.call(this);
+  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${() => {
+    expandCollapseAllComponents.call(this);
+  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}</div>` : ''} </div> </div>  ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))).map(component => (0, _litElement.html)` <div class="nav-bar-tag-and-paths ${component.expanded ? 'expanded' : 'collapsed'}"> <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s)).map(p => (0, _litElement.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>`)}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

package/dist/lib/utils/common-utils.js

@@ -62,10 +62,14 @@ function getBaseUrlFromUrl(url) {
 }
 
 function componentIsInSearch(searchVal, component) {
-  return component.name.toLowerCase().includes(searchVal.toLowerCase());
+  return !searchVal || component.name.toLowerCase().includes(searchVal.toLowerCase());
 }
 
 function pathIsInSearch(searchVal, path) {
+  if (!searchVal) {
+    return true;
+  }
+
   const stringToSearch = `${path.method} ${path.path} ${path.summary || path.description || ''} ${path.operationId || ''}`.toLowerCase();
   return stringToSearch.includes(searchVal.toLowerCase());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "0.9.344",
+  "version": "0.9.346",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "repository": {