openapi-explorer 0.8.266 → 0.8.271

package/package.json

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

package/src/components/api-request.js

@@ -733,7 +733,7 @@ export default class ApiRequest extends LitElement {
           : html`
             <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
               <button class="toolbar-btn" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
-              <pre style="white-space:pre; max-height:400px; overflow:auto">${responseFormat
+              <pre>${responseFormat
                 ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`
                 : `${this.responseText}`
               }
@@ -742,11 +742,11 @@ export default class ApiRequest extends LitElement {
         }
         <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
           <button class="toolbar-btn" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
-          <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
+          <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
         </div>
         <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
           <button class="toolbar-btn" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
-          <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
+          <pre><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
         </div>
       </div>`;
   }

package/src/openapi-explorer.js

@@ -27,7 +27,7 @@ import advancedSearchStyles from './styles/advanced-search-styles';
 
 import { advancedSearch, getCurrentElement, pathIsInSearch, replaceState, sleep } from './utils/common-utils';
 import ProcessSpec from './utils/spec-parser';
-import mainBodyTemplate from './templates/main-body-template';
+import responsiveViewMainBodyTemplate from './templates/responsiveViewMainBodyTemplate';
 import apiRequestStyles from './styles/api-request-styles';
 import { checkForAuthToken } from './templates/security-scheme-template';
 
@@ -180,8 +180,11 @@ export default class OpenApiExplorer extends LitElement {
       .section-gap.section-tag {
         border-bottom:1px solid var(--border-color);
       }
+      .method-section-gap {
+        padding: 24px 8px 0px 4px;
+      }
       .section-gap { 
-        padding: 0px 4px; 
+        padding: 24px 0px 0px;
       }
       .section-tag-header {
         position:relative;
@@ -432,7 +435,7 @@ export default class OpenApiExplorer extends LitElement {
   }
 
   render() {
-    return mainBodyTemplate.call(this);
+    return responsiveViewMainBodyTemplate.call(this);
   }
 
   observeExpandedContent() {
@@ -700,8 +703,9 @@ export default class OpenApiExplorer extends LitElement {
 
     let repeatedElementIndex;
     if (navEl.dataset.contentId === 'section') {
-      const assignedNodes = this.shadowRoot.querySelector('slot.custom-nav-section').assignedNodes();
-      repeatedElementIndex = [].findIndex.call(assignedNodes, (slot) => slot === event.target);
+      const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
+      const assignedNodes = navSectionSlot && navSectionSlot.assignedNodes();
+      repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, (slot) => slot === event.target);
     }
     this.isIntersectionObserverActive = false;
     this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView, repeatedElementIndex);
@@ -757,8 +761,9 @@ export default class OpenApiExplorer extends LitElement {
     // Update NavBar View and Styles
     let newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     if (elementId === 'section') {
-      const assignedNodes = this.shadowRoot.querySelector('slot.custom-nav-section').assignedNodes();
-      newNavEl = assignedNodes[repeatedElementIndex || 0];
+      const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
+      const assignedNodes = navSectionSlot && navSectionSlot.assignedNodes();
+      newNavEl = assignedNodes && assignedNodes[repeatedElementIndex || 0];
     }
 
     if (!newNavEl) {
@@ -773,7 +778,9 @@ export default class OpenApiExplorer extends LitElement {
     if (oldNavEl) {
       oldNavEl.classList.remove('active');
     }
-    this.shadowRoot.querySelector('slot.custom-nav-section').assignedNodes().filter((n, nodeIndex) => nodeIndex !== repeatedElementIndex).forEach((node) => {
+    const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
+    const assignedNodes = navSectionSlot && navSectionSlot.assignedNodes();
+    (assignedNodes || []).filter((n, nodeIndex) => nodeIndex !== repeatedElementIndex).forEach((node) => {
       node.classList.remove('active');
     });
     newNavEl.classList.add('active'); // must add the class after scrolling

package/src/styles/input-styles.js

@@ -59,6 +59,14 @@ export default css`
   position: absolute;
   top: 8px;
   right: 8px;
+  margin-right: 8px;
+}
+.tab-content .toolbar-btn + pre {
+  white-space: pre;
+  max-height:400px;
+  overflow: auto;
+  display: flex;
+  padding-right: 70px;
 }
 
 input, textarea, select, button, pre {

package/src/templates/code-samples-template.js

@@ -25,7 +25,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
     ${xCodeSamples.map((v, i) => html`
       <div class="tab-content m-markdown code-sample-wrapper" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>
         <button class="toolbar-btn" @click='${(e) => { copyToClipboard(v.source, e); }}'> Copy </button>
-        <pre style="white-space:pre; display: flex;">
+        <pre>
           <code>${Prism.languages[v.lang && v.lang.toLowerCase()] ? unsafeHTML(Prism.highlight(v.source, Prism.languages[v.lang && v.lang.toLowerCase()], v.lang && v.lang.toLowerCase())) : v.source}</code>
         </pre>
       </div>`)

package/src/templates/endpoint-template.js

@@ -144,7 +144,7 @@ export default function endpointTemplate() {
       <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 section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}' > 
+    <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>

package/src/templates/focused-endpoint-template.js

@@ -72,7 +72,7 @@ export default function focusedEndpointTemplate() {
   } else if (focusElId === 'section') {
     focusedTemplate = html`
       <section id='section' style="margin-top:24px; margin-bottom:24px;"
-        class='observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
+        class='observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}'>
         <slot name="custom-section"></slot>
       </section>`;
   } else if (focusElId.startsWith('cmp--') && this.showComponents === 'true') {

package/src/templates/overview-template.js

@@ -12,7 +12,7 @@ function headingRenderer() {
 export default function overviewTemplate() {
   return html`
     <section id="overview" part="section-overview"
-      class="observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}">
+      class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}">
       ${this.resolvedSpec && this.resolvedSpec.info
         ? html`
           <slot name="overview">

package/src/templates/{main-body-template.js → responsiveViewMainBodyTemplate.js}

@@ -12,7 +12,7 @@ import advancedSearchTemplate from './advance-search-template';
 import SetTheme from '../utils/theme';
 import ColorUtils from '../utils/color-utils';
 
-export default function mainBodyTemplate() {
+export default function responsiveViewMainBodyTemplate() {
   const newTheme = {
     bg1: ColorUtils.isValidHexColor(this.bgColor) ? this.bgColor : '',
     fg1: ColorUtils.isValidHexColor(this.textColor) ? this.textColor : '',
@@ -57,8 +57,8 @@ export default function mainBodyTemplate() {
                     ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
                     ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
                     ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
-                    <section id='section' style="margin-top:24px; margin-bottom:24px;"
-                      class='observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
+                    <section id='section'
+                      class='observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}'>
                       <slot name="custom-section"></slot>
                     </section>
                     ${this.renderStyle === 'read'

package/src/templates/security-scheme-template.js

@@ -298,7 +298,7 @@ export default function securitySchemeTemplate() {
   }
   const providedApiKeys = schemes.filter((v) => (v.finalKeyValue));
   return html`
-  <section id='auth' part="section-auth" class = 'observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
+  <section id='auth' part="section-auth" class = 'observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}'>
     <slot name="authentication">
       <div class="section-padding">
         <div class='sub-title regular-font'>AUTHENTICATION</div>