rapidoc 9.3.7 → 10.0.0

package/src/templates/advance-search-template.js

@@ -1,72 +0,0 @@
-import { html } from 'lit';
-import '~/components/dialog-box';
-
-/* eslint-disable indent */
-export default function searchByPropertiesModalTemplate() {
-  document.addEventListener('close', () => { this.showAdvancedSearchDialog = false; });
-  document.addEventListener('open', this.onOpenSearchDialog);
-
-  return html`
-    <dialog-box 
-      heading="Search" 
-      show="${(!!this.showAdvancedSearchDialog)}"
-    >
-      <span class="advanced-search-options">
-        <input
-          id="input-advanced-search-dialog"
-          style="width:100%; padding-right:20px;"
-          type="text"
-          part="textbox textbox-search-dialog"
-          placeholder="search text..."
-          spellcheck="false"
-          @keyup = "${(e) => this.onAdvancedSearch(e, 400)}"
-        >
-        <div style="display:flex; margin:8px 0 24px;">
-          <div>
-            <input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-path" checked @change = "${(e) => this.onAdvancedSearch(e, 0)}">
-            <label for="search-api-path" style="cursor:pointer;"> API Path </label>
-            </div>
-          <div style="margin-left: 16px;">
-            <input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-descr" checked @change = "${(e) => this.onAdvancedSearch(e, 0)}">
-            <label style="cursor:pointer;" for="search-api-descr"> API Description </label>
-          </div>
-          <div style="margin-left: 16px;">
-            <input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-params" @change = "${(e) => this.onAdvancedSearch(e, 0)}">
-            <label style="cursor:pointer;" for="search-api-params"> API Parameters </label>
-          </div>
-          <div style="margin-left: 16px;">
-            <input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-request-body" @change = "${(e) => this.onAdvancedSearch(e, 0)}">
-            <label style="cursor:pointer;" for="search-api-request-body"> Request Body Parameters </label>
-          </div>
-          <div style="margin-left: 16px;">
-            <input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-resp-descr" @change = "${(e) => this.onAdvancedSearch(e, 0)}">
-            <label style="cursor:pointer;" for="search-api-resp-descr"> Response Description </label>
-          </div>
-        </div>
-      </span>
-      
-      ${this.advancedSearchMatches?.map((path) => html`
-      <div
-        class="mono-font small-font-size hover-bg"
-        style='padding: 5px; cursor: pointer; border-bottom: 1px solid var(--light-border-color); ${path.deprecated ? 'filter:opacity(0.5);' : ''}' 
-        data-content-id='${path.elementId}'
-        tabindex = '0'
-        @click="${
-          (e) => {
-            this.searchVal = ''; // clear quick filter if applied
-            this.showAdvancedSearchDialog = false; // Hide Search Dialog
-            this.requestUpdate();
-            this.scrollToEventTarget(e, true);
-          }
-        }"
-      > 
-        <span style="pointer-events: none" class="upper bold-text method-fg ${path.method}">${path.method}</span> 
-        <span style="pointer-events: none">${path.path}</span>
-        <span style="pointer-events: none" class="regular-font gray-text">${path.summary}</span>
-      </div>
-    `)
-    }
-    </dialog-box>
-  `;
-}
-/* eslint-enable indent */

package/src/templates/callback-template.js

@@ -1,73 +0,0 @@
-import { html } from 'lit';
-
-/* eslint-disable indent */
-export default function callbackTemplate(callbacks) {
-  return html`
-    <div class="req-res-title" style="margin-top:12px">CALLBACKS</div>
-    ${Object.entries(callbacks).map((kv) => html`
-      <div class="tiny-title" style="padding: 12px; border:1px solid var(--light-border-color)"> 
-        ${kv[0]}
-        ${Object.entries(kv[1]).map((pathObj) => html`
-          <div class="mono-font small-font-size" style="display:flex; margin-left:16px;">
-            <div style="width:100%"> 
-              ${Object.entries(pathObj[1]).map((method) => html`
-                <div>
-                  <div style="margin-top:12px;">
-                    <div class="method method-fg ${method[0]}" style="width:70px; border:none; margin:0; padding:0; line-height:20px; vertical-align: baseline;text-align:left"> 
-                      <span style="font-size:20px;"> &#x2944; </span> 
-                      ${method[0]} 
-                    </div>
-                    <span style="line-height:20px; vertical-align: baseline;">${pathObj[0]} </span>
-                  </div>  
-                  <div class='expanded-req-resp-container'>
-                    <api-request
-                      class = "${this.renderStyle}-mode callback"  
-                      style = "width:100%;"
-                      callback = "true"
-                      method = "${method[0] || ''}", 
-                      path = "${pathObj[0] || ''}" 
-                      .parameters = "${method[1]?.parameters || ''}" 
-                      .request_body = "${method[1]?.requestBody || ''}"
-                      fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-                      allow-try = "false"
-                      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 = "false"
-                      schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
-                      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,
-                        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>
-
-                    <api-response
-                      style = "width:100%;"
-                      class = "${this.renderStyle}-mode"
-                      callback = "true"
-                      .responses="${method[1]?.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' : 'true'}"
-                      schema-hide-write-only = "false"
-                      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,
-                      schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-                    > </api-response>
-                  </div>
-                </div>  
-              `)}
-            </div>  
-          </div>  
-        `)}
-      </div>  
-    `)}
-  `;
-}
-/* eslint-enable indent */

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

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import Prism from 'prismjs';
-import { copyToClipboard } from '~/utils/common-utils';
-
-/* eslint-disable indent */
-export default function codeSamplesTemplate(xCodeSamples) {
-  return html`
-  <section class="table-title" style="margin-top:24px;">CODE SAMPLES</div>
-  <div class="tab-panel col"
-    @click="${
-      (e) => {
-        if (!e.target.classList.contains('tab-btn')) { return; }
-        const clickedTab = e.target.dataset.tab;
-
-        const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];
-        const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];
-        tabButtons.forEach((tabBtnEl) => tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? 'add' : 'remove']('active'));
-        tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });
-      }
-    }">
-    <div class="tab-buttons row" style="width:100; overflow">
-      ${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
-    </div>
-    ${xCodeSamples.map((v, i) => html`
-      <div class="tab-content m-markdown" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>
-        <button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(v.source, e); }}'> Copy </button>
-        <pre><code class="language">${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(v.source, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : v.source}</code></pre>
-      </div>`)
-    }
-  </div>  
-  </section>`;
-}
-/* eslint-enable indent */

package/src/templates/components-template.js

@@ -1,76 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-import { schemaInObjectNotation } from '~/utils/schema-utils';
-import '~/components/json-tree';
-import '~/components/schema-tree';
-import '~/components/schema-table';
-
-function schemaBodyTemplate(sComponent) {
-  return html`
-  <div class='divider'></div>
-  <div class='expanded-endpoint-body observe-me ${sComponent.name}' id='cmp--${sComponent.id}' >
-    <div style="font-weight:bold"> ${sComponent.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400;"> Schema </span></div>
-  ${this.schemaStyle === 'table'
-    ? html`
-      <schema-table
-        .data = '${schemaInObjectNotation(sComponent.component, {})}'
-        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 = "${this.schemaHideWriteOnly}"
-        exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </schema-table>`
-    : html`
-      <schema-tree
-        .data = '${schemaInObjectNotation(sComponent.component, {})}'
-        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 = "${this.schemaHideWriteOnly}"
-        exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </schema-tree>`
-}
-  </div>`;
-}
-
-function componentBodyTemplate(sComponent, componentType) {
-  if (sComponent.id.indexOf('schemas-') !== -1) {
-    return schemaBodyTemplate.call(this, sComponent);
-  }
-  return html`
-  <div class='divider'></div>
-  <div class='expanded-endpoint-body observe-me ${sComponent.name}' id='cmp--${sComponent.id}' >
-    ${html`
-      <div style="font-weight:bold"> ${sComponent.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400"> ${componentType} </span> </div>
-      ${sComponent.component
-    ? html`
-      <div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg2)'> 
-        <json-tree class="border tree" render-style='${this.renderStyle}' .data="${sComponent.component}"> </json-tree>
-      </div>`
-    : ''}
-    `}
-  </div>
-  `;
-}
-
-export default function componentsTemplate() {
-  if (!this.resolvedSpec) { return ''; }
-  return html`
-  ${this.resolvedSpec.components.map((component) => html`
-    <div id="cmp--${component.name.toLowerCase()}" class='regular-font section-gap--read-mode observe-me' style="border-top:1px solid var(--primary-color);">
-      <div class="title tag">${component.name}</div>
-      <div class="regular-font-size">
-        ${unsafeHTML(`<div class='m-markdown regular-font'>${marked(component.description ? component.description : '')}</div>`)}
-      </div>
-    </div>
-    <div class='regular-font section-gap--read-mode'>
-      ${component.subComponents.filter((c) => c.expanded !== false).map((sComponent) => componentBodyTemplate.call(this, sComponent, component.name))}
-    </div>
-    `)
-}
-`;
-}
-/* eslint-enable indent */

package/src/templates/endpoint-template.js

@@ -1,249 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-import '~/components/api-request';
-import '~/components/api-response';
-import codeSamplesTemplate from '~/templates/code-samples-template';
-import callbackTemplate from '~/templates/callback-template';
-import { pathSecurityTemplate } from '~/templates/security-scheme-template';
-import { getMatchedPaths, rapidocApiKey } from '~/utils/common-utils';
-
-function toggleExpand(path) {
-  if (path.expanded) {
-    path.expanded = false; // collapse
-    if (this.updateRoute === 'true') {
-      this.replaceHistoryState('');
-    }
-  } else {
-    path.expanded = true; // Expand
-    if (this.updateRoute === 'true') {
-      const newHash = `${this.routePrefix || '#'}${path.elementId}`;
-      if (window.location.hash !== newHash) {
-        this.replaceHistoryState(path.elementId);
-      }
-    }
-  }
-  this.requestUpdate();
-}
-
-export function expandCollapseAll(operationsRootEl, action = 'expand-all') {
-  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
-  if (action === 'expand-all') {
-    elList.map((el) => {
-      el.classList.replace('collapsed', 'expanded');
-    });
-  } else {
-    elList.map((el) => {
-      el.classList.replace('expanded', 'collapsed');
-    });
-  }
-}
-
-function onExpandCollapseAll(e, action = 'expand-all') {
-  expandCollapseAll.call(this, e.target.closest('.operations-root'), action);
-}
-
-/* eslint-disable indent */
-function endpointHeadTemplate(path, pathsExpanded = false) {
-  return html`
-  <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" part="section-endpoint-head-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-    <div part="section-endpoint-head-method" class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div> 
-    <div  part="section-endpoint-head-path" class="path ${path.deprecated ? 'deprecated' : ''}"> 
-      ${path.path} 
-      ${path.isWebhook ? html`<span style="font-family: var(--font-regular); font-size: var(--); font-size: var(--font-size-small); color:var(--primary-color); margin-left: 16px"> 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>`
-      : ''
-    }
-    ${this.showSummaryWhenCollapsed
-      ? html`
-        <div class="only-large-screen" style="min-width:60px; flex:1"></div>
-        <div part="section-endpoint-head-description" 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]?.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(path.xCodeSamples) : '';
-  return html`
-  <div part="section-endpoint-body-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
-    <div class="summary">
-      ${path.summary
-        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}</div>`
-        : path.shortSummary !== path.description
-          ? html`<div class="title" part="section-endpoint-body-title">${path.shortSummary}</div>`
-          : ''
-      }
-      ${path.xBadges && path.xBadges?.length > 0
-        ? html`
-          <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
-            ${path.xBadges.map((v) => (
-                v.color === 'none'
-                  ? ''
-                  : html`<span part="endpoint-badge" 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>
-          `
-        : ''
-      }
-
-      ${path.description ? html`<div part="section-endpoint-body-description" class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-      ${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>`
-        : ''
-      }
-      <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="view-mode-request ${this.layout}-layout">
-        <api-request
-          class = "${this.renderStyle}-mode ${this.layout}-layout"
-          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 && path.servers.length > 0 ? path.servers[0].url : this.selectedServer?.computedUrl}" 
-          active-schema-tab = "${this.defaultSchemaTab}"
-          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}" 
-          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,
-            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) : ''}
-        </div>  
-
-        <api-response
-          class = "${this.renderStyle}-mode"
-          style = "width:100%;"
-          webhook = "${path.isWebhook}"
-          .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}"
-          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-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
-          textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
-          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-        > </api-response>
-      </div>
-  </div>`;
-}
-
-export default function endpointTemplate(isMini = false, pathsExpanded = false) {
-  if (!this.resolvedSpec) { return ''; }
-  return html`
-    ${isMini
-      ? ''
-      : html`
-        <div style="display:flex; justify-content:flex-end;"> 
-          <span @click="${(e) => onExpandCollapseAll(e, 'expand-all')}" style="color:var(--primary-color); cursor:pointer;">
-            Expand all
-          </span> 
-          &nbsp;|&nbsp; 
-          <span @click="${(e) => onExpandCollapseAll(e, 'collapse-all')}" style="color:var(--primary-color); cursor:pointer;" >
-            Collapse all
-          </span> 
-          &nbsp; sections
-        </div>`
-    }
-    ${this.resolvedSpec.tags.map((tag) => html`
-      ${isMini
-        ? html`
-          <div class='section-tag-body'>
-          ${tag.paths.filter((path) => {
-            if (this.searchVal) {
-              return getMatchedPaths(this.searchVal, path, tag.name);
-            }
-            return true;
-            }).map((path) => html`
-            <section id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-              ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
-              ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
-            </section>`)
-          }
-          </div>
-        `
-        : html` 
-          <div class='regular-font section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}'> 
-            <div class='section-tag-header' @click="${() => { tag.expanded = !tag.expanded; this.requestUpdate(); }}">
-              <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.displayName || tag.name}</div>
-            </div>
-            <div class='section-tag-body'>
-              <slot name="${tag.elementId}"></slot>
-              <div class="regular-font regular-font-size m-markdown" style="padding-bottom:12px">
-                ${unsafeHTML(marked(tag.description || ''))}
-              </div>
-              ${tag.paths.filter((v) => {
-                if (this.searchVal) {
-                  return getMatchedPaths(this.searchVal, v, tag.name);
-                }
-                return true;
-                }).map((path) => html`
-                <section part="section-endpoint" id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-                  ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
-                  ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
-                </section>`)
-              }
-            </div>
-          </div>
-        `
-      }
-  `)
-  }`;
-}
-/* eslint-enable indent */