rapidoc 9.3.8 → 10.0.0

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

@@ -1,199 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-import { rapidocApiKey } from '~/utils/common-utils';
-import { pathSecurityTemplate } from '~/templates/security-scheme-template';
-import codeSamplesTemplate from '~/templates/code-samples-template';
-import callbackTemplate from '~/templates/callback-template';
-import '~/components/api-request';
-import '~/components/api-response';
-
-/* eslint-disable indent */
-function headingRenderer(tagElementId) {
-  const renderer = new marked.Renderer();
-  renderer.heading = ((text, level, raw, slugger) => `<h${level} class="observe-me" id="${tagElementId}--${slugger.slug(raw)}">${text}</h${level}>`);
-  return renderer;
-}
-
-function expandCollapseTagDescription(e) {
-  const tagDescriptionEl = e.target.closest('.tag-container').querySelector('.tag-description');
-  const tagIconEl = e.target.closest('.tag-container').querySelector('.tag-icon');
-  if (tagDescriptionEl && tagIconEl) {
-    const isExpanded = tagDescriptionEl.classList.contains('expanded');
-    if (isExpanded) {
-      tagDescriptionEl.style.maxHeight = 0;
-      tagDescriptionEl.classList.replace('expanded', 'collapsed');
-      tagIconEl.classList.replace('expanded', 'collapsed');
-    } else {
-      tagDescriptionEl.style.maxHeight = `${tagDescriptionEl.scrollHeight}px`;
-      tagDescriptionEl.classList.replace('collapsed', 'expanded');
-      tagIconEl.classList.replace('collapsed', 'expanded');
-    }
-  }
-}
-
-export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription = '') {
-  const acceptContentTypes = new Set();
-  for (const respStatus in path.responses) {
-    for (const acceptContentType in (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?.some((ps) => (v.securitySchemeId in ps)))) || [];
-
-  // If a RapiDoc API Key is specified on the element and its value is not hyphen(-) then include it for all paths
-  const rapiDocApiKey = this.resolvedSpec.securitySchemes.find((v) => (v.securitySchemeId === rapidocApiKey && v.value !== '-'));
-  if (rapiDocApiKey) {
-    nonEmptyApiKeys.push(rapiDocApiKey);
-  }
-
-  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} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
-      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂')
-        ? html`
-          <div class="tag-container" part="section-operation-tag"> 
-            <span class="upper" style="font-weight:bold; font-size:18px;"> ${tagName} </span>
-            ${tagDescription
-              ? html`
-                <svg class="tag-icon collapsed" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" fill="none" style="stroke:var(--primary-color); vertical-align:top; cursor:pointer"
-                @click="${(e) => { expandCollapseTagDescription.call(this, e); }}"
-                >
-                  <path d="M12 20h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8"></path><path d="M18 4v17"></path><path d="M15 18l3 3l3 -3"></path>
-                </svg>
-                <div class="tag-description collapsed" style="max-height:0px; overflow:hidden; margin-top:16px; border:1px solid var(--border-color)"> 
-                  <div class="m-markdown" style="padding:8px"> ${unsafeHTML(marked(tagDescription))}</div>  
-                </div>`
-              : ''
-            }  
-          </div>
-        `
-        : ''
-      }
-      ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
-      ${html`
-        ${path.xBadges && path.xBadges?.length > 0
-          ? html`
-            <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
-              ${path.xBadges.map((v) => (
-                v.color === 'none'
-                  ? ''
-                  : html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
-                ))
-              }
-            </div>
-            `
-          : ''
-        }
-        <h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
-        ${path.isWebhook
-          ? html`<span part="section-operation-webhook" style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
-          : html`
-            <div part="section-operation-webhook-method" class="mono-font regular-font-size" style="text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)"> 
-              <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>
-          `
-        }
-        <slot name="${path.elementId}"></slot>`
-      }
-      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-      ${pathSecurityTemplate.call(this, path.security)}
-      ${path.externalDocs?.url || path.externalDocs?.description
-        ? html`<div style="background-color:var(--bg3); padding:2px 8px 8px 8px; margin:8px 0; border-radius:var(--border-radius)"> 
-            <div class="m-markdown"> ${unsafeHTML(marked(path.externalDocs?.description || ''))} </div>
-            ${path.externalDocs?.url
-              ? html`<a style="font-family:var(--font-mono); font-size:var(--font-size-small)" href="${path.externalDocs?.url}" target="_blank">
-                  ${path.externalDocs?.url} <div style="transform: rotate(270deg) scale(1.5); display: inline-block; margin-left:5px">⇲</div>
-                </a>`
-              : ''
-            }
-          </div>`
-        : ''
-      }
-      ${codeSampleTabPanel}
-      <div class='expanded-req-resp-container'>
-        <api-request
-          class = "${this.renderStyle}-mode"
-          style = "width:100%;"
-          webhook = "${path.isWebhook}"
-          method = "${path.method}"
-          path = "${path.path}"
-          .security = "${path.security}"
-          .parameters = "${path.parameters}"
-          .request_body = "${path.requestBody}"
-          .api_keys = "${nonEmptyApiKeys}"
-          .servers = "${path.servers}"
-          server-url = "${path.servers?.[0]?.url || this.selectedServer?.computedUrl}"
-          fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-          allow-try = "${this.allowTry}"
-          show-curl-before-try = "${this.showCurlBeforeTry}"
-          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}"
-          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
-          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
-          fetch-credentials = "${this.fetchCredentials}"
-          exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
-            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
-            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
-            anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-        > </api-request>
-
-        ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
-
-        <api-response
-          class = "${this.renderStyle}-mode"
-          style = "width:100%;"
-          webhook = "${path.isWebhook}"
-          .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}"
-          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
-          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
-          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-          exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
-            tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content, 
-            schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-        > </api-response>
-      </div>
-    </div>
-  `;
-}
-
-export default function expandedEndpointTemplate() {
-  if (!this.resolvedSpec) { return ''; }
-  return html`
-  ${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="section-tag-title label-tag-title">${tag.displayName || tag.name}</div>
-      <slot name="${tag.elementId}"></slot>
-      <div class="regular-font-size">
-      ${
-        unsafeHTML(`
-          <div class="m-markdown regular-font">
-          ${marked(tag.description || '', this.infoDescriptionHeadingsInNavBar === 'true' ? { renderer: headingRenderer(tag.elementId) } : undefined)}
-        </div>`)
-      }
-      </div>
-    </section>
-    <section class="regular-font section-gap--read-mode" part="section-operations-in-tag">
-      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path))}
-    </section>
-    `)
-  }
-`;
-}
-/* eslint-enable indent */

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

@@ -1,110 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-import { expandedEndpointBodyTemplate } from '~/templates/expanded-endpoint-template';
-import '~/components/api-request';
-import '~/components/api-response';
-import componentsTemplate from '~/templates/components-template';
-import overviewTemplate from '~/templates/overview-template';
-import serverTemplate from '~/templates/server-template';
-import securitySchemeTemplate from '~/templates/security-scheme-template';
-import { expandCollapseNavBarTag } from '~/templates/navbar-template';
-
-function headingRenderer(tagElementId) {
-  const renderer = new marked.Renderer();
-  renderer.heading = ((text, level, raw, slugger) => `<h${level} class="observe-me" id="${tagElementId}--${slugger.slug(raw)}">${text}</h${level}>`);
-  return renderer;
-}
-
-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.showInfo === 'true') {
-    return wrapFocusedTemplate(overviewTemplate.call(this));
-  }
-  const selectedTagObj = this.resolvedSpec.tags[0];
-  const selectedPathObj = this.resolvedSpec.tags[0]?.paths[0];
-  return (selectedTagObj && selectedPathObj)
-    ? wrapFocusedTemplate(expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name))
-    : wrapFocusedTemplate('');
-}
-
-/* eslint-disable indent */
-function focusedTagBodyTemplate(tag) {
-  return html`
-    <h1 id="${tag.elementId}">${tag.displayName || tag.name}</h1>
-    ${this.onNavTagClick === 'show-description' && tag.description
-      ? html`
-        <div class="m-markdown">
-          ${
-            unsafeHTML(`
-            <div class="m-markdown regular-font">
-              ${marked(tag.description || '', this.infoDescriptionHeadingsInNavBar === 'true' ? { renderer: headingRenderer(tag.elementId) } : undefined)}
-            </div>`)
-          }
-        </div>`
-      : ''
-    }
-  `;
-}
-
-export default function focusedEndpointTemplate() {
-  if (!this.focusedElementId || !this.resolvedSpec) {
-    return;
-  }
-  const focusElId = this.focusedElementId;
-  let selectedPathObj = null;
-  let selectedTagObj = null;
-  let focusedTemplate;
-  let i = 0;
-  if (focusElId.startsWith('overview') && this.showInfo === 'true') {
-    focusedTemplate = overviewTemplate.call(this);
-  } else if (focusElId === 'auth' && this.allowAuthentication === 'true') {
-    focusedTemplate = securitySchemeTemplate.call(this);
-  } else if (focusElId === 'servers' && this.allowServerSelection === 'true') {
-    focusedTemplate = serverTemplate.call(this);
-  } else if (focusElId === 'operations-top') {
-    focusedTemplate = html`
-    <div id="operations-top" class="observe-me">
-      <slot name="operations-top"></slot>
-    </div>`;
-  } else if (focusElId.startsWith('cmp--') && this.showComponents === 'true') {
-    focusedTemplate = componentsTemplate.call(this);
-  } 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 = wrapFocusedTemplate.call(this, focusedTagBodyTemplate.call(this, selectedTagObj));
-    } else {
-      focusedTemplate = defaultContentTemplate.call(this);
-    }
-  } else {
-    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) {
-      // In focused mode we must expand the nav-bar tag element if it is collapsed
-      const newNavEl = this.shadowRoot.getElementById(`link-${focusElId}`);
-      expandCollapseNavBarTag(newNavEl, 'expand');
-      focusedTemplate = wrapFocusedTemplate.call(
-        this,
-        expandedEndpointBodyTemplate.call(this, selectedPathObj, (selectedTagObj.name || ''), (selectedTagObj.description || '')),
-      );
-    } else {
-      // if focusedElementId is not found then show the default content (overview or first-path)
-      focusedTemplate = defaultContentTemplate.call(this);
-    }
-  }
-  return focusedTemplate;
-}
-/* eslint-enable indent */

package/src/templates/header-template.js

@@ -1,66 +0,0 @@
-import { html } from 'lit';
-import logoTemplate from '~/templates/logo-template';
-
-/* eslint-disable indent */
-export default function headerTemplate() {
-  return html`
-  <header class="row main-header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
-    <div class="only-large-screen-flex" style="align-items: center;">
-      <slot name="logo" class="logo" part="section-logo">
-        ${logoTemplate('height:36px;width:36px;margin-left:5px')}
-        <!-- m-logo style="height:36px;width:36px;margin-left:5px"></m-logo -->
-      </slot>  
-      <div class="header-title" part="label-header-title">${this.headingText}</div>
-    </div>  
-    <div style="margin: 0px 8px;display:flex;flex:1">
-      ${(this.allowSpecUrlLoad === 'false')
-        ? ''
-        : html`
-          <input id="spec-url" 
-            type="text" 
-            style="font-size:var(--font-size-small)" 
-            class="header-input mono-font"
-            part="textbox textbox-spec-url" 
-            placeholder="Spec URL" 
-            value="${this.specUrl || ''}" 
-            @change="${this.onSpecUrlChange}" 
-            spellcheck="false"
-          >
-          <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div> 
-        `
-      } 
-      ${(this.allowSpecFileLoad === 'false')
-        ? ''
-        : html`
-          <input id="spec-file" 
-            part = "file-input"
-            type="file" 
-            style="display:none" 
-            value="${this.specFile || ''}" 
-            @change="${this.onSpecFileChange}" 
-            spellcheck="false"
-           >
-          <button class="m-btn primary only-large-screen" style="margin-left:10px;" part="btn btn-fill" @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>
-        `
-      }
-      <slot name="header"></slot>
-      ${(this.allowSearch === 'false' || 'read focused'.includes(this.renderStyle))
-        ? ''
-        : html`  
-          <input id="search" class="header-input" type="text" part="textbox textbox-header-filter" placeholder="Filter" @change="${this.onSearchChange}" style="max-width:130px;margin-left:10px;" spellcheck="false" >
-          <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div>
-        `
-      }
-      
-      ${(this.allowAdvancedSearch === 'false' || 'read focused'.includes(this.renderStyle))
-        ? ''
-        : html`
-          <button class="m-btn primary only-large-screen" part="btn btn-fill btn-search" style="margin-left:10px;" @click="${this.onShowSearchModalClicked}">
-            Search
-          </button>
-        `
-      }
-    </div>
-    </header>`;
-  }
-/* eslint-enable indent */

package/src/templates/json-schema-viewer-template.js

@@ -1,185 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-
-// Templates
-import overviewTemplate from '~/templates/overview-template';
-import headerTemplate from '~/templates/header-template';
-import { schemaInObjectNotation, generateExample, standardizeExample } from '~/utils/schema-utils';
-import '~/components/json-tree';
-import '~/components/schema-tree';
-import SetTheme from '~/utils/theme';
-import { isValidHexColor } from '~/utils/color-utils';
-
-/* eslint-disable indent */
-// Json Schema Nav Template
-function jsonSchemaNavTemplate() {
-  return html`
-  <nav class='nav-bar' part="section-navbar">
-    <slot name="nav-logo" class="logo"></slot>
-    <div style="display:flex;line-height:22px; padding:8px">
-      <input id="nav-bar-search" 
-        part = "textbox textbox-nav-filter"
-        style = "width:100%; height: 26px; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-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>
-    <nav style="flex:1" class='nav-scroll' part="section-navbar-scroll">
-      ${this.resolvedSpec.schemaAndExamples.map((v) => html`
-        <div class='nav-bar-path' data-content-id='${v.elementId}' id='link-${v.elementId}'
-          @click = '${(e) => {
-            this.scrollToEventTarget(e, false);
-          }}'
-        > 
-          ${v.name}
-        </div>`)
-      }
-    </nav>  
-  </nav>
-  `;
-}
-
-// Json Schema Body Template
-function jsonSchemaBodyTemplate() {
-  return html`
-    ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
-    <div style="font-size:var(--font-size-regular);">
-    ${this.resolvedSpec.schemaAndExamples.map((jSchemaBody) => {
-      const examplesObj = generateExample(jSchemaBody.schema, 'json', standardizeExample(jSchemaBody.examples), standardizeExample(jSchemaBody.example), true, false, 'json', true);
-      jSchemaBody.selectedExample = examplesObj[0]?.exampleId;
-      return html`
-        <section id='${jSchemaBody.elementId}' class='json-schema-and-example regular-font' style="display:flex; flex-direction: column; border:1px solid var(--border-color); margin-bottom:32px; border-top: 5px solid var(--border-color)">
-          <div style="padding:16px; border-bottom: 1px solid var(--border-color)">
-            <div style="font-size:var(--font-size-small); font-weight:bold">${jSchemaBody.name}</div>
-            <span class="json-schema-description m-markdown ">${unsafeHTML(marked(jSchemaBody.description || ''))}</span>
-          </div>  
-          <div style="display:flex; flex-direction: row; gap:16px;">
-            <div class="json-schema-def" style="flex:1; padding:16px 0 16px 16px; ">
-              <schema-tree
-                .data = "${schemaInObjectNotation(jSchemaBody.schema, {})}"
-                schema-expand-level = "${this.schemaExpandLevel}"
-                schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-                schema-hide-read-only = "false"
-                schema-hide-write-only = "false"
-              > </schema-tree>
-            </div>
-            <div class="json-schema-example-panel" style="width:400px; background-color: var(--input-bg); padding:16px 0 16px 16px; border-left: 1px dashed var(--border-color);">
-              ${examplesObj.length > 1
-                ? html`<select style="min-width:100px; max-width:100%" @change='${(e) => this.onSelectExample(e, jSchemaBody)}'>
-                    ${examplesObj.map((v) => html`
-                      <option value="${v.exampleId}" ?selected=${(v.exampleId === jSchemaBody.selectedExample)}> 
-                        ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary}
-                      </option>`)
-                    }
-                  </select>`
-                : html`<div style="font-size: var(--font-size-small);font-weight:700; margin:5px 0"> ${examplesObj[0].exampleSummary}</div>`
-              }
-              ${examplesObj.map((v) => html`
-                <json-tree 
-                  .data = "${v.exampleValue}"
-                  data-example = "${v.exampleId}"
-                  class = "example"
-                  style = "margin-top:16px; display: ${v.exampleId === jSchemaBody.selectedExample ? 'flex' : 'none'}"
-                ></json-tree>`)
-              }
-            </div>
-          </div>
-        </section>`;
-      })
-    }
-    </div>
-  `;
-}
-/* eslint-enable indent */
-
-// Json Schema Root Template
-export default function jsonSchemaViewerTemplate(isMini = false) {
-// export default function jsonSchemaViewerTemplate(isMini = false, pathsExpanded = false) {
-  if (!this.resolvedSpec) {
-    return '';
-  }
-  const newTheme = {
-    bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',
-    fg1: isValidHexColor(this.textColor) ? this.textColor : '',
-    headerColor: isValidHexColor(this.headerColor) ? this.headerColor : '',
-    primaryColor: isValidHexColor(this.primaryColor) ? this.primaryColor : '',
-    navBgColor: isValidHexColor(this.navBgColor) ? this.navBgColor : '',
-    navTextColor: isValidHexColor(this.navTextColor) ? this.navTextColor : '',
-    navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
-    navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
-    navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
-    navAccenttextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
-  };
-  /* eslint-disable indent */
-  if (this.resolvedSpec.specLoadError) {
-    if (isMini) {
-      return html`
-        ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-        <div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
-      `;
-    }
-    return html`
-      ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <!-- Header -->
-      ${headerTemplate.call(this)}
-      <h1> Header </h1>
-      <main class="main-content regular-font" part="section-main-content">
-        <slot></slot>
-        <div style="margin:24px; text-align: center;">
-          <h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
-          <div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
-        </div>
-      </main>  
-    `;
-  }
-  if (this.resolvedSpec.isSpecLoading) {
-    return html`
-      ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <main class="main-content regular-font" part="section-main-content">
-        <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
-          <div class="loader"></div>
-        </div>
-      </main>  
-    `;
-  }
-
-  return html`
-    ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-
-    <!-- Header -->
-    ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}
-    
-    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection}>
-
-      <!-- Side Nav -->
-      ${jsonSchemaNavTemplate.call(this)}
-
-      <!-- Main Content -->
-      <main class="main-content regular-font" part="section-main-content">
-        <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
-          ${this.loading === true
-            ? html`<div class="loader"></div>`
-            : html`
-              ${this.loadFailed === true
-                ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`
-                : html`
-                  <div class="operations-root" @click="${(e) => { this.handleHref(e); }}">
-                    ${jsonSchemaBodyTemplate.call(this)}
-                  </div>
-                `
-              }`
-          }
-        </div>
-        <slot name="footer"></slot>
-      </main>
-    </div>  
-  `;
-}
-/* eslint-enable indent */

package/src/templates/logo-template.js

@@ -1,18 +0,0 @@
-import { html } from 'lit';
-
-/* eslint-disable indent */
-export default function logoTemplate(style) {
-return html`
-  <div style=${style}>
-    <svg viewBox="1 0 511 512">
-      <path d="M351 411a202 202 0 01-350 0 203 203 0 01333-24 203 203 0 0117 24zm0 0" fill="#adc165"/>
-      <path d="M334 387a202 202 0 01-216-69 202 202 0 01216 69zm78 32H85a8 8 0 01-8-8 8 8 0 018-8h327a8 8 0 017 8 8 8 0 01-7 8zm0 0" fill="#99aa52"/>
-      <path d="M374 338l-5 30a202 202 0 01-248-248 203 203 0 01253 218zm0 0" fill="#ffc73b"/>
-      <path d="M374 338a202 202 0 01-100-197 203 203 0 01100 197zm38 81l-6-2-231-231a8 8 0 0111-11l231 230a8 8 0 01-5 14zm0 0" fill="#efb025"/>
-      <path d="M311 175c0 75 40 140 101 175a202 202 0 000-350 202 202 0 00-101 175zm0 0" fill="#ff903e"/>
-      <path d="M412 419a8 8 0 01-8-8V85a8 8 0 0115 0v326a8 8 0 01-7 8zm0 0" fill="#e87425"/>
-    </svg>
-  </div>    
-`;
-}
-/* eslint-enable indent */