openapi-explorer 0.9.310 → 0.9.314

package/src/templates/endpoint-template.js

@@ -1,175 +0,0 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { marked } from 'marked';
-import '../components/api-request';
-import '../components/api-response';
-import codeSamplesTemplate from './code-samples-template';
-import callbackTemplate from './callback-template';
-import { pathSecurityTemplate } from './security-scheme-template';
-import { getCurrentElement, pathIsInSearch, replaceState } from '../utils/common-utils';
-
-function toggleExpand(path) {
-  if (path.expanded) {
-    path.expanded = false; // collapse
-    replaceState(null);
-  } else {
-    path.expanded = true; // Expand
-    if (path.elementId !== getCurrentElement()) {
-      replaceState(path.elementId);
-    }
-  }
-  this.requestUpdate();
-}
-
-function toggleTag(tagElement, tagId) {
-  const sectionTag = tagElement.target.closest('.section-tag');
-  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
-  tag.expanded = !tag.expanded;
-  if (tag.expanded) {
-    sectionTag.classList.remove('collapsed');
-    sectionTag.classList.add('expanded');
-  } else {
-    sectionTag.classList.remove('expanded');
-    sectionTag.classList.add('collapsed');
-  }
-  this.requestUpdate();
-}
-export function expandCollapseAll(currentElement, action = 'expand-all') {
-  const operationsRootEl = currentElement.target.closest('.operations-root');
-  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
-  const expand = action === 'expand-all';
-  this.resolvedSpec.tags.forEach(t => t.expanded = expand);
-  elList.map((el) => {
-    if (expand) {
-      el.classList.remove('collapsed');
-      el.classList.add('expanded');
-    } else {
-      el.classList.remove('expanded');
-      el.classList.add('collapsed');
-    }
-  });
-}
-
-/* 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}"> ${path.method} </div> 
-    <div class="path"> 
-      ${path.path} 
-      ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (Webhook) </span>` : ''}
-    </div>
-    ${path.deprecated
-      ? html`
-        <span style="font-size:var(--font-size-small); text-transform:uppercase; font-weight:bold; color:var(--red); margin:2px 0 0 5px;"> 
-          deprecated 
-        </span>`
-      : ''
-    }
-    <div class="only-large-screen" style="min-width:60px; flex:1"></div>
-    <div class="descr">${path.summary || path.shortSummary} </div>
-  </summary>
-  `;
-}
-
-function endpointBodyTemplate(path) {
-  const acceptContentTypes = new Set();
-  for (const respStatus in path.responses) {
-    for (const acceptContentType in path.responses[respStatus] && path.responses[respStatus].content) {
-      acceptContentTypes.add(acceptContentType.trim());
-    }
-  }
-  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) => (v.finalKeyValue && path.security && 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">
-      ${path.summary ? html`<div class="title">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : ''}
-      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-      <slot name="${path.elementId}"></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}" 
-          .parameters = "${path.parameters}"
-          .request_body = "${path.requestBody}"
-          .api_keys = "${nonEmptyApiKeys}"
-          .servers = "${path.servers}" 
-          server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
-          active-schema-tab = "${this.defaultSchemaTab}"
-          fill-defaults = "${this.fillRequestWithDefault}"
-          enable-console = "${this.allowTry}"
-          accept = "${accept}"
-          render-style="${this.renderStyle}" 
-          schema-style = "${this.schemaStyle}" 
-          schema-expand-level = "${this.schemaExpandLevel}"
-          schema-description-expanded = "${this.schemaDescriptionExpanded}"
-          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}"
-        active-schema-tab = "${this.defaultSchemaTab}" 
-        render-style="${this.renderStyle}" 
-        schema-style="${this.schemaStyle}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        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>`;
-}
-
-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>
-  `)
-  }`;
-}
-/* eslint-enable indent */

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

@@ -1,104 +0,0 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { marked } from 'marked';
-import { pathSecurityTemplate } from './security-scheme-template';
-import codeSamplesTemplate from './code-samples-template';
-import callbackTemplate from './callback-template';
-import '../components/api-request';
-import '../components/api-response';
-
-/* eslint-disable indent */
-export function expandedEndpointBodyTemplate(path, tagName = '') {
-  const acceptContentTypes = new Set();
-  for (const respStatus in path.responses) {
-    for (const acceptContentType in path.responses[respStatus] && path.responses[respStatus].content) {
-      acceptContentTypes.add(acceptContentType.trim());
-    }
-  }
-  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) => (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 !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
-    ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
-    ${html`
-      <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>`
-    }
-    ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-    <slot name="${path.elementId}"></slot>
-    ${pathSecurityTemplate.call(this, path.security)}
-    ${codeSampleTabPanel}
-    <div class='expanded-req-resp-container'>
-      <api-request class="request-panel"
-        method = "${path.method}"
-        path = "${path.path}"
-        .parameters = "${path.parameters}"
-        .request_body = "${path.requestBody}"
-        .api_keys = "${nonEmptyApiKeys}"
-        .servers = "${path.servers}"
-        server-url = "${path.servers && path.servers[0] && path.servers[0].url || this.selectedServer.computedUrl}"
-        fill-defaults = "${this.fillRequestWithDefault}"
-        enable-console = "${this.allowTry}"
-        accept = "${accept}"
-        render-style="${this.renderStyle}" 
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        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}"
-        render-style = "${this.renderStyle}"
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        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>
-  `;
-}
-
-export default function expandedEndpointTemplate() {
-  return html`
-  ${(this.resolvedSpec && this.resolvedSpec.tags || []).map((tag) => html`
-    <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
-      <div class="title tag" part="label-tag-title">${tag.name}</div>
-      <slot name="${tag.elementId}"></slot>
-      <div class="regular-font-size">
-      ${
-        unsafeHTML(`
-          <div class="m-markdown regular-font">
-          ${marked(tag.description || '')}
-        </div>`)
-      }
-      </div>
-    </section>
-    <section class='regular-font section-gap--read-mode' part="section-operations-in-tag">
-      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path, 'BBB'))}
-    </section>
-    `)
-  }
-`;
-}
-/* eslint-enable indent */

package/src/templates/navbar-template.js

@@ -1,175 +0,0 @@
-import { html } from 'lit-element';
-import { pathIsInSearch } from '../utils/common-utils';
-
-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;
-  this.resolvedSpec.tags.forEach(t => { t.expanded = expand; });
-}
-
-/* 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(0deg); cursor: pointer;">▸</div>`
-                  : html`<div @click="${(e) => { expandCollapseAll.call(this, e); }}" style="font-size: 16px;  transform: rotate(90deg); cursor: pointer;">▸</div>`
-                }`
-              : ''
-            }  
-          </div>
-        </div>
-      </div>
-
-      <!-- TAGS AND PATHS-->
-      ${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'>
-                <!-- Paths in each tag (endpoints) -->
-                ${tag.paths.filter((v) => {
-                  if (this.matchPaths) {
-                    return pathIsInSearch(this.matchPaths, v);
-                  }
-                  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) => { 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>
-        `)
-      }
-
-      <!-- COMPONENTS -->
-      ${this.resolvedSpec.components && this.showComponents === 'true'
-        ? 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>
-`;
-}
-/* eslint-enable indent */

package/src/templates/overview-template.js

@@ -1,58 +0,0 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { marked } from 'marked';
-
-/* 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:bold'>
-                  ${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 || '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">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>
-  `;
-}
-/* eslint-enable indent */

package/src/templates/responsiveViewMainBodyTemplate.js

@@ -1,72 +0,0 @@
-import { html } from 'lit-element';
-
-// Templates
-import focusedEndpointTemplate from './focused-endpoint-template';
-import overviewTemplate from './overview-template';
-import endpointTemplate from './endpoint-template';
-import serverTemplate from './server-template';
-import securitySchemeTemplate from './security-scheme-template';
-import navbarTemplate from './navbar-template';
-import advancedSearchTemplate from './advance-search-template';
-import SetTheme from '../utils/theme';
-import ColorUtils from '../utils/color-utils';
-
-export default function responsiveViewMainBodyTemplate() {
-  const newTheme = {
-    bg1: ColorUtils.isValidHexColor(this.bgColor) ? this.bgColor : '',
-    fg1: ColorUtils.isValidHexColor(this.textColor) ? this.textColor : '',
-    primaryColor: ColorUtils.isValidHexColor(this.primaryColor) ? this.primaryColor : '#3E6077',
-    secondaryColor: ColorUtils.isValidHexColor(this.secondaryColor) ? this.secondaryColor : '#FBAF0B',
-    headerColor: ColorUtils.isValidHexColor(this.headerColor) ? this.headerColor : '',
-    navBgColor: ColorUtils.isValidHexColor(this.navBgColor) ? this.navBgColor : '',
-    navTextColor: ColorUtils.isValidHexColor(this.navTextColor) ? this.navTextColor : '',
-    navHoverBgColor: ColorUtils.isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
-    navHoverTextColor: ColorUtils.isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
-  };
-
-  /* eslint-disable indent */
-  return html`
-    ${SetTheme.call(this, newTheme)}
-    
-    <!-- Advanced Search -->
-    ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
-
-    <div id='the-main-body' class="body">
-      <!-- Side Nav -->
-      ${(this.renderStyle === 'focused' && this.resolvedSpec) ? navbarTemplate.call(this) : ''
-      }
-
-      <!-- Main Content -->
-      ${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.showInfo === 'true' ? overviewTemplate.call(this) : ''}
-                    ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
-                    ${this.allowAuthentication === 'true' ? 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>
-        <slot name="footer"></slot>
-      </main>
-    </div>  
-  `;
-}
-/* eslint-enable indent */