openapi-explorer 0.8.298 → 0.8.301

package/package.json

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

package/src/openapi-explorer.js

@@ -58,7 +58,6 @@ export default class OpenApiExplorer extends LitElement {
 
       // Spec
       specUrl: { type: String, attribute: 'spec-url' },
-      specFile: { type: String, attribute: false },
 
       // UI Layouts
       layout: { type: String },
@@ -79,8 +78,6 @@ export default class OpenApiExplorer extends LitElement {
       showInfo: { type: String, attribute: 'show-info' },
       allowAuthentication: { type: String, attribute: 'show-authentication' },
       allowTry: { type: String, attribute: 'enable-console' },
-      allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
-      allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
       allowSearch: { type: String, attribute: 'allow-search' },
       allowAdvancedSearch: { type: String, attribute: 'allow-advanced-search' },
       allowServerSelection: { type: String, attribute: 'show-server-selection' },
@@ -466,6 +463,11 @@ export default class OpenApiExplorer extends LitElement {
         this.intersectionObserver.disconnect();
       }
     }
+    if (name === 'explorer-location') {
+      window.setTimeout(() => {
+        this.scrollTo(newVal);
+      }, 0);
+    }
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
@@ -527,10 +529,7 @@ export default class OpenApiExplorer extends LitElement {
     }
   }
 
-  setSecuritySchemeToken(apiKeyId, token) {
-    this.setAuthenticationConfiguration(apiKeyId, { token });
-  }
-
+  // Public Method
   async setAuthenticationConfiguration(apiKeyId, { token, clientId, clientSecret, redirectUri }) {
     const securityObj = this.resolvedSpec && this.resolvedSpec.securitySchemes.find((v) => (v.apiKeyId === apiKeyId));
     if (!securityObj) {
@@ -558,7 +557,7 @@ export default class OpenApiExplorer extends LitElement {
   afterSpecParsedAndValidated(spec) {
     this.resolvedSpec = spec;
 
-    this.dispatchEvent(new CustomEvent('spec-loaded', { detail: spec }));
+    this.dispatchEvent(new CustomEvent('spec-loaded', { bubbles: true, detail: spec }));
     this.requestUpdate();
 
     // Initiate IntersectionObserver and put it at the end of event loop, to allow loading all the child elements (must for larger specs)

package/src/templates/navbar-template.js

@@ -1,51 +1,22 @@
 import { html } from 'lit-element';
 import { pathIsInSearch } from '../utils/common-utils';
 
-export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
-  const tagAndPathEl = navLinkEl && navLinkEl.closest('.nav-bar-tag-and-paths');
-  if (tagAndPathEl) {
-    const expand = tagAndPathEl.classList.contains('collapsed') && action === 'toggle' || action === 'expand';
-    if (expand) {
-      tagAndPathEl.classList.remove('collapsed');
-      tagAndPathEl.classList.add('expanded');
-      return;
-    }
-
-    tagAndPathEl.classList.remove('expanded');
-    tagAndPathEl.classList.add('collapsed');
-  }
-}
-
-function onExpandCollapse(tagId, e) {
+function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
   if (!tag) {
     return;
   }
-  expandCollapseNavBarTag(e.target, 'toggle');
   tag.expanded = !tag.expanded;
-
-  if (this.resolvedSpec.tags.some(t => t.expanded)) {
-    this.operationsCollapsed = false;
-  }
-
-  if (this.resolvedSpec.tags.every(t => !t.expanded)) {
-    this.operationsCollapsed = true;
+  if (tag.expanded && this.operationsCollapsed) {
+    this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
   }
+  this.requestUpdate();
 }
 
-export function expandCollapseAll(e, action = 'expand-all') {
-  const navEl = e.target.closest('.nav-scroll');
-
-  const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
-  if (action === 'expand-all') {
-    elList.map((el) => { expandCollapseNavBarTag(el, 'expand'); });
-    this.resolvedSpec.tags.forEach(t => { t.expanded = true; });
-    this.operationsCollapsed = false;
-  } else {
-    elList.map((el) => { expandCollapseNavBarTag(el, 'collapse'); });
-    this.resolvedSpec.tags.forEach(t => { t.expanded = false; });
-    this.operationsCollapsed = true;
-  }
+export function expandCollapseAll() {
+  const expand = this.operationsCollapsed;
+  this.operationsCollapsed = !expand;
+  this.resolvedSpec.tags.forEach(t => { t.expanded = expand; });
 }
 
 /* eslint-disable indent */
@@ -107,23 +78,23 @@ export default function navbarTemplate() {
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToEventTarget(e, false)}'></slot>
 
-      <slot name="operations-header">
-        <div class="sticky-scroll-element">
-          <div id='link-paths' class='nav-bar-section' part="navbar-operations-header">
-          <div class='nav-bar-section-title'>OPERATIONS</div>  
-          <div style="display:flex; margin-left:10px;">
-              ${this.renderStyle === 'focused' && this.resolvedSpec.tags.length > 1
-                ? html`
-                  ${this.operationsCollapsed
-                    ? html`<div @click="${(e) => { expandCollapseAll.call(this, e, 'expand-all'); }}" style="font-size: 16px; transform: rotate(0deg); cursor: pointer;">▸</div>`
-                    : html`<div @click="${(e) => { expandCollapseAll.call(this, e, 'collapse-all'); }}" style="font-size: 16px;  transform: rotate(90deg); cursor: pointer;">▸</div>`
-                  }`
-                : ''
-              }  
-            </div>
+      <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(0deg); cursor: pointer;">▸</div>`
+                  : html`<div @click="${(e) => { expandCollapseAll.call(this, e); }}" style="font-size: 16px;  transform: rotate(90deg); cursor: pointer;">▸</div>`
+                }`
+              : ''
+            }  
           </div>
         </div>
-      </slot>
+      </div>
 
       <!-- TAGS AND PATHS-->
       ${this.resolvedSpec.tags
@@ -135,7 +106,7 @@ export default function navbarTemplate() {
                 ? html``
                 : html`
                   <div  class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}'
-                    @click='${(e) => { onExpandCollapse.call(this, tag.elementId, e); }}'>
+                    @click='${() => { onExpandCollapse.call(this, tag.elementId); }}'>
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
                       <div>${tag.name}</div>