openapi-explorer 0.9.331 → 0.9.337

package/dist/browser/openapi-explorer.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"openapi-explorer.min.js","mappings":";;AAyBA;ACtBA;AC4tBA","sources":["webpack://openapi-explorer/./src/templates/code-samples-template.js","webpack://openapi-explorer/./src/templates/callback-template.js","webpack://openapi-explorer/./src/components/api-request.js"],"sourcesContent":["import { html } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport Prism from 'prismjs';\nimport { copyToClipboard } from '../utils/common-utils';\n\n/* eslint-disable indent */\nexport default function codeSamplesTemplate(xCodeSamples) {\n  return html`\n  <section class=\"table-title top-gap\"> CODE SAMPLES </div>\n  <div class=\"tab-panel col\"\n    @click=\"${\n      (e) => {\n        if (!e.target.classList.contains('tab-btn')) { return; }\n        const clickedTab = e.target.dataset.tab;\n\n        const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];\n        const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];\n        tabButtons.forEach((tabBtnEl) => tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? 'add' : 'remove']('active'));\n        tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });\n      }\n    }\">\n    <div class=\"tab-buttons row\" style=\"width:100; overflow\">\n      ${xCodeSamples.map((v, i) => html`<button class=\"tab-btn ${i === 0 ? 'active' : ''}\" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}\n    </div>\n    ${xCodeSamples.map((v, i) => html`\n      <div class=\"tab-content m-markdown code-sample-wrapper\" style= \"display:${i === 0 ? 'block' : 'none'}\" data-tab = '${v.lang}${i}'>\n        <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(v.source, e); }}'>Copy</button>\n        <pre>\n          <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>\n        </pre>\n      </div>`)\n    }\n  </section>`;\n}\n/* eslint-enable indent */\n","import { html } from 'lit-element';\n\n/* eslint-disable indent */\nexport default function callbackTemplate(callbacks) {\n  return html`\n  <div class=\"api-request col regular-font request-panel ${this.renderStyle}-mode\">\n    ${Object.entries(callbacks).map((kv) => html`\n      <div class=\"${this.renderStyle}-request\"> \n        <div class=\"req-res-title\">CALLBACKS</div>\n        <div class=\"table-title\">${kv[0]}</div>\n        ${Object.entries(kv[1]).map((pathObj) => html`\n          <div class=\"mono-font small-font-size\" style=\"display:flex;\">\n            <div style=\"width:100%\"> \n              ${Object.entries(pathObj[1]).map((method) => html`\n                <div>\n                  <div style=\"margin-top:12px;\">\n                    <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\"> \n                      <span style=\"font-size:20px;\"> &#x2944; </span> \n                      ${method[0]} \n                    </div>\n                    <span style=\"line-height:20px; vertical-align: baseline;\">${pathObj[0]} </span>\n                  </div>  \n                  <div class='expanded-req-resp-container'>\n                    <api-request class=\"request-panel\"\n                      callback = \"true\"\n                      method = \"${method[0] || ''}\", \n                      path = \"${pathObj[0] || ''}\" \n                      .parameters = \"${method[1] && method[1].parameters || ''}\" \n                      .request_body = \"${method[1] && method[1].requestBody || ''}\"\n                      fill-defaults = \"${this.fillRequestWithDefault}\"\n                      enable-console = \"false\"\n                      render-style=\"${this.renderStyle}\" \n                      schema-style = \"${this.schemaStyle}\"\n                      active-schema-tab = \"${this.defaultSchemaTab}\"\n                      schema-expand-level = \"${this.schemaExpandLevel}\"\n                      schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n                      schema-hide-read-only = \"${this.schemaHideReadOnly}\"\n                      fetch-credentials = \"${this.fetchCredentials}\"\n                      exportparts=\"btn btn-fill btn-outline btn-try\">\n                    </api-request>\n\n                    <api-response\n                      callback = \"true\"\n                      .responses=\"${method[1] && method[1].responses}\"\n                      render-style=\"${this.renderStyle}\"\n                      schema-style=\"${this.schemaStyle}\"\n                      active-schema-tab = \"${this.defaultSchemaTab}\"\n                      schema-expand-level = \"${this.schemaExpandLevel}\"\n                      schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n                      exportparts = \"btn--resp btn-fill--resp btn-outline--resp\"\n                    > </api-response>\n                  </div>\n                </div>  \n              `)}\n            </div>  \n          </div>  \n        `)}\n      </div>  \n    `)}\n  </div>\n  `;\n}\n/* eslint-enable indent */\n","import { LitElement, html } from 'lit-element';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport mimeTypeResolver from './mime-types';\n\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport formatXml from 'xml-but-prettier';\n\nimport { copyToClipboard } from '../utils/common-utils';\nimport { schemaInObjectNotation, getTypeInfo, generateExample } from '../utils/schema-utils';\nimport './json-tree';\nimport './schema-tree';\nimport './tag-input';\n\nconst textFileRegex = RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application/vnd.');\nconst mediaFileRegex = RegExp('^audio/|^image/|^video/');\nconst truncateString = (str, length) => (str && str.length > length ? `${str.substring(0, length - 1)}…` : str);\n\nexport default class ApiRequest extends LitElement {\n  createRenderRoot() { return this; }\n\n  constructor() {\n    super();\n    this.responseMessage = '';\n    this.responseStatus = '';\n    this.responseHeaders = '';\n    this.responseText = '';\n    this.responseUrl = '';\n    this.responseElapsedMs = 0;\n    this.curlSyntax = '';\n    this.activeResponseTab = 'response'; // allowed values: response, headers, curl\n    this.selectedRequestBodyType = '';\n    this.selectedRequestBodyExample = '';\n  }\n\n  static get properties() {\n    return {\n      serverUrl: { type: String, attribute: 'server-url' },\n      servers: { type: Array },\n      method: { type: String },\n      path: { type: String },\n      parameters: { type: Array },\n      request_body: { type: Object },\n      api_keys: { type: Array },\n      parser: { type: Object },\n      accept: { type: String },\n      callback: { type: String },\n      responseMessage: { type: String, attribute: false },\n      responseText: { type: String, attribute: false },\n      responseHeaders: { type: String, attribute: false },\n      responseStatus: { type: String, attribute: false },\n      responseUrl: { type: String, attribute: false },\n      responseElapsedMs: { type: Number, attribute: false },\n      fillRequestWithDefault: { type: String, attribute: 'fill-defaults' },\n      allowTry: { type: String, attribute: 'enable-console' },\n      renderStyle: { type: String, attribute: 'render-style' },\n      schemaStyle: { type: String, attribute: 'schema-style' },\n      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },\n      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },\n      schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },\n      fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n      // properties for internal tracking\n      activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute\n      selectedRequestBodyType: { type: String, attribute: 'selected-request-body-type' }, // internal tracking of selected request-body type\n      selectedRequestBodyExample: { type: String, attribute: 'selected-request-body-example' }, // internal tracking of selected request-body example\n    };\n  }\n\n  render() {\n    return html`\n    <div class=\"api-request col regular-font request-panel ${(this.renderStyle === 'focused' || this.callback === 'true') ? 'focused-mode' : 'view-mode'}\">\n      <div class=\" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} \"> \n        ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}\n      </div>\n      <div>\n        ${this.inputParametersTemplate('path')}\n        ${this.inputParametersTemplate('query')}\n        ${this.requestBodyTemplate()}\n        ${this.inputParametersTemplate('header')}\n        ${this.inputParametersTemplate('cookie')}\n        ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}\n      </div>  \n    </div>\n    `;\n  }\n\n  updated(changedProperties) {\n    // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.\n    // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually\n    if (this.renderStyle !== 'focused') {\n      return;\n    }\n\n    // dont update example as only tabs is switched\n    if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {\n      return;\n    }\n\n    const exampleTextAreaEls = [...this.querySelectorAll('textarea[data-ptype=\"form-data\"]')];\n    exampleTextAreaEls.forEach((el) => {\n      const origExampleEl = this.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);\n      if (origExampleEl) {\n        el.value = origExampleEl.value;\n      }\n    });\n  }\n\n  /* eslint-disable indent */\n  inputParametersTemplate(paramType) {\n    const filteredParams = this.parameters ? this.parameters.filter((param) => param.in === paramType) : [];\n    if (filteredParams.length === 0) {\n      return '';\n    }\n    let title = '';\n    if (paramType === 'path') {\n      title = 'PATH PARAMETERS';\n    } else if (paramType === 'query') {\n      title = 'QUERY-STRING PARAMETERS';\n    } else if (paramType === 'header') {\n      title = 'REQUEST HEADERS';\n    } else if (paramType === 'cookie') {\n      title = 'COOKIES';\n    }\n\n    const tableRows = [];\n    for (const param of filteredParams) {\n      if (!param.schema) {\n        continue;\n      }\n      const paramSchema = getTypeInfo(param.schema);\n      if (!paramSchema) {\n        continue;\n      }\n      const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;\n      let paramStyle = 'form';\n      let paramExplode = true;\n      if (paramType === 'query') {\n        if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {\n          paramStyle = param.style;\n        }\n        if (typeof param.explode === 'boolean') {\n          paramExplode = param.explode;\n        }\n      }\n\n      tableRows.push(html`\n      <tr> \n        <td style=\"width:160px; min-width:50px;\">\n          <div class=\"param-name ${paramSchema.deprecated ? 'deprecated' : ''}\">\n            ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'>*</span>` : ''}\n          </div>\n          <div class=\"param-type\">\n            ${paramSchema.type === 'array'\n              ? `${paramSchema.arrayType}`\n              : `${paramSchema.format ? paramSchema.format : paramSchema.type}`\n            }${!paramSchema.deprecated && param.required ? html`<span style='opacity: 0;'>*</span>` : ''}\n          </div>\n        </td>  \n        ${this.allowTry === 'true'\n          ? html`\n            <td style=\"min-width:160px;\">\n              ${paramSchema.type === 'array'\n                ? html`\n                  <tag-input class=\"request-param\" \n                    style = \"width:100%;\" \n                    data-ptype = \"${paramType}\"\n                    data-pname = \"${param.name}\"\n                    data-default = \"${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}\"\n                    data-param-serialize-style = \"${paramStyle}\"\n                    data-param-serialize-explode = \"${paramExplode}\"\n                    data-array = \"true\"\n                    placeholder=\"${paramSchema.example || (Array.isArray(defaultVal) ? defaultVal[0] : defaultVal) || 'add-multiple &#x21a9;'}\"\n                    .value = \"${Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}\"\n                  >\n                  </tag-input>`\n                : paramSchema.type === 'object'\n                  ? html`\n                    <textarea \n                      class = \"textarea request-param\"\n                      part = \"textarea textarea-param\"\n                      data-ptype = \"${paramType}-object\"\n                      data-pname = \"${param.name}\"\n                      data-default = \"${defaultVal}\"\n                      data-param-serialize-style = \"${paramStyle}\"\n                      data-param-serialize-explode = \"${paramExplode}\"\n                      spellcheck = \"false\"\n                      placeholder=\"${paramSchema.example || defaultVal || ''}\"\n                      style = \"resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};\"\n                    >${this.fillRequestWithDefault === 'true' ? defaultVal : ''}</textarea>`\n                  : html`\n                    <input type=\"${paramSchema.format === 'password' ? 'password' : 'text'}\" spellcheck=\"false\" style=\"width:100%\" placeholder=\"${paramSchema.example || defaultVal || ''}\"\n                      class=\"request-param\"\n                      part=\"textbox textbox-param\"\n                      data-ptype=\"${paramType}\"\n                      data-pname=\"${param.name}\" \n                      data-default=\"${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}\"\n                      data-array=\"false\"\n                      @keyup=\"${this.requestParamFunction}\"\n                      .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"\n                    />`\n                }\n            </td>`\n          : ''\n        }\n        ${this.renderStyle === 'focused'\n          ? html`\n            <td>\n              ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern\n                ? html`\n                  <div class=\"param-constraint\">\n                    ${paramSchema.constraint ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraint}<br/>` : ''}\n                    ${paramSchema.pattern ? html`<span style=\"font-weight:bold\">Pattern: </span>${truncateString(paramSchema.pattern, 60)}<br/>` : ''}\n                    ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n                      ${i > 0 ? '|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n                      ${html`\n                        <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                          data-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                          data-enum=\"${v.trim()}\"\n                          @click=\"${(e) => {\n                            const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${param.name}\"]`);\n                            if (inputEl) {\n                              if (e.target.dataset.type === 'array') {\n                                inputEl.value = [e.target.dataset.enum];\n                              } else {\n                                inputEl.value = e.target.dataset.enum;\n                              }\n                            }\n                          }}\"\n                        >\n                          ${v} \n                        </a>`\n                      }`)}\n                  </div>`\n                : ''\n              }\n            </td>  \n          </tr>`\n        : ''\n      }\n    `);\n    }\n\n    return html`\n    <div class=\"table-title top-gap\">${title}${paramType === 'path' ? html`<span style='color:var(--red);'>*</span>` : ''}</div>\n    <div style=\"display:block; overflow-x:auto; max-width:100%;\">\n      <table role=\"presentation\" class=\"m-table\" style=\"width:100%; word-break:break-word;\">\n        ${tableRows}\n      </table>\n    </div>`;\n  }\n\n  resetRequestBodySelection() {\n    this.selectedRequestBodyType = '';\n    this.selectedRequestBodyExample = '';\n    this.clearResponseData();\n  }\n\n  // Request-Body Event Handlers\n  onSelectExample(e) {\n    this.selectedRequestBodyExample = e.target.value;\n    const exampleDropdownEl = e.target;\n    window.setTimeout((selectEl) => {\n      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');\n      const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');\n      userInputExampleTextareaEl.value = exampleTextareaEl.value;\n    }, 0, exampleDropdownEl);\n  }\n\n  onMimeTypeChange(e) {\n    this.selectedRequestBodyType = e.target.value;\n    const mimeDropdownEl = e.target;\n    this.selectedRequestBodyExample = '';\n    window.setTimeout((selectEl) => {\n      const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');\n      if (exampleTextareaEl) {\n        const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');\n        userInputExampleTextareaEl.value = exampleTextareaEl.value;\n      }\n    }, 0, mimeDropdownEl);\n  }\n\n  requestBodyTemplate() {\n    if (!this.request_body) {\n      return '';\n    }\n    if (Object.keys(this.request_body).length === 0) {\n      return '';\n    }\n\n    // Variable to store partial HTMLs\n    let reqBodyTypeSelectorHtml = '';\n    let reqBodyFileInputHtml = '';\n    let reqBodyFormHtml = '';\n    let reqBodySchemaHtml = '';\n    let reqBodyExampleHtml = '';\n\n    const requestBodyTypes = [];\n    const content = this.request_body.content;\n    for (const mimeType in content) {\n      requestBodyTypes.push({\n        mimeType,\n        schema: content[mimeType].schema,\n        example: content[mimeType].example,\n        examples: content[mimeType].examples,\n      });\n      if (!this.selectedRequestBodyType) {\n        this.selectedRequestBodyType = mimeType;\n      }\n    }\n    // MIME Type selector\n    reqBodyTypeSelectorHtml = requestBodyTypes.length === 1\n      ? ''\n      : html`\n        <select aria-label=\"mime type\" style=\"min-width:100px; max-width:100%;  margin-bottom:-1px;\" @change = '${(e) => this.onMimeTypeChange(e)}'>\n          ${requestBodyTypes.map((reqBody) => html`\n            <option value = '${reqBody.mimeType}' ?selected = '${reqBody.mimeType === this.selectedRequestBodyType}'>\n              ${reqBody.mimeType}\n            </option> `)\n          }\n        </select>\n      `;\n\n    // For Loop - Main\n    requestBodyTypes.forEach((reqBody) => {\n      let reqBodyExamples = [];\n\n      if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {\n        // Generate Example\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          reqBodyExamples = generateExample(\n            reqBody.examples ? reqBody.examples : '',\n            reqBody.example ? reqBody.example : '',\n            reqBody.schema,\n            reqBody.mimeType,\n            false,\n            true,\n            'text',\n            true\n          );\n          if (!this.selectedRequestBodyExample) {\n            this.selectedRequestBodyExample = (reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '');\n          }\n          reqBodyExampleHtml = html`\n            ${reqBodyExampleHtml}\n            <div class = 'example-panel border-top pad-top-8'>\n              ${reqBodyExamples.length === 1\n                ? ''\n                : html`\n                  <select aria-label='request body example' style=\"min-width:100px; max-width:100%;  margin-bottom:-1px;\" @change='${(e) => this.onSelectExample(e)}'>\n                    ${reqBodyExamples.map((v) => html`<option value=\"${v.exampleId}\" ?selected=${v.exampleId === this.selectedRequestBodyExample} > \n                      ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} \n                    </option>`)}\n                  </select>\n                `\n              }\n              ${reqBodyExamples\n                .filter((v) => v.exampleId === this.selectedRequestBodyExample)\n                .map((v) => html`\n                <div class=\"example ${v.exampleId === this.selectedRequestBodyExample ? 'example-selected' : ''}\" data-default = '${v.exampleId}'>\n                  ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style=\"padding: 4px 0\"> ${v.exampleSummary} </div>` : ''}\n                  ${v.exampleDescription ? html`<div class=\"m-markdown-small\" style=\"padding: 4px 0\"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''}\n                  <!-- this textarea is for user to edit the example -->\n                  <textarea \n                    class = \"textarea request-body-param-user-input\"\n                    part = \"textarea textarea-param\"\n                    spellcheck = \"false\"\n                    data-ptype = \"${reqBody.mimeType}\" \n                    data-default = \"${v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8)}\"\n                    data-default-format = \"${v.exampleFormat}\"\n                    style=\"width:100%; resize:vertical;\"\n                  >${this.fillRequestWithDefault === 'true'\n                      ? (v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8))\n                      : ''\n                    }</textarea>\n                  <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->\n                  <textarea \n                    class = \"textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}\" \n                    spellcheck = \"false\"\n                    data-ptype = \"${reqBody.mimeType}\" \n                    style=\"width:100%; resize:vertical; display:none\"\n                  >${(v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8))}</textarea>\n                </div>  \n              `)}\n\n            </div>\n          `;\n        }\n      } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          const ex = generateExample(\n            reqBody.examples ? reqBody.examples : '',\n            reqBody.example ? reqBody.example : '',\n            reqBody.schema,\n            reqBody.mimeType,\n            false,\n            true,\n            'text',\n            true\n          );\n          if (reqBody.schema) {\n            reqBodyFormHtml = this.formDataTemplate(reqBody.schema, reqBody.mimeType, (ex[0] ? ex[0].exampleValue : ''));\n          }\n        }\n      } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          reqBodyFileInputHtml = html`\n            <div class = \"small-font-size bold-text row\">\n              <input type=\"file\" part=\"file-input\" style=\"max-width:100%\" class=\"request-body-param-file\" data-ptype=\"${reqBody.mimeType}\" spellcheck=\"false\" />\n            </div>  \n          `;\n        }\n      }\n\n      // Generate Schema\n      if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text')) {\n        const schemaAsObj = schemaInObjectNotation(reqBody.schema, {});\n        if (this.schemaStyle === 'table') {\n          reqBodySchemaHtml = html`\n            ${reqBodySchemaHtml}\n            <schema-table\n              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n              .data = '${schemaAsObj}'\n              schema-expand-level = \"${this.schemaExpandLevel}\"\n              schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n              schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n              schema-hide-write-only = false\n            > </schema-table>\n          `;\n        } else if (this.schemaStyle === 'tree') {\n          reqBodySchemaHtml = html`\n            ${reqBodySchemaHtml}\n            <schema-tree\n              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n              .data = '${schemaAsObj}'\n              schema-expand-level = \"${this.schemaExpandLevel}\"\n              schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n              schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n              schema-hide-write-only = false\n            > </schema-tree>\n          `;\n        }\n      }\n    });\n\n    return html`\n      <div class='request-body-container' data-selected-request-body-type=\"${this.selectedRequestBodyType}\">\n        <div class=\"table-title top-gap row\">\n          REQUEST BODY ${this.request_body.required ? html`<span class=\"mono-font\" style='color:var(--red)'>*</span>` : ''} \n          <span style = \"font-weight:normal; margin-left:5px\"> ${this.selectedRequestBodyType}</span>\n          <span style=\"flex:1\"></span>\n          ${reqBodyTypeSelectorHtml}\n        </div>\n        ${this.request_body.description ? html`<div class=\"m-markdown\" style=\"margin-bottom:12px\">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}\n        \n        ${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text'))\n          ? html`\n            <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n              <div class=\"tab-buttons row\" @click=\"${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}\">\n                <button class=\"tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab=\"model\" >MODEL</button>\n                <button class=\"tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}\" data-tab=\"body\">BODY</button>\n              </div>\n              ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'block' : 'none'}\"> ${reqBodySchemaHtml}</div>`}\n              ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'none' : 'block'}\"> ${reqBodyExampleHtml}</div>`}\n            </div>`\n          : html`  \n            ${reqBodyFileInputHtml}\n            ${reqBodyFormHtml}`\n        }\n      </div>  \n    `;\n  }\n\n  formDataTemplate(schema, mimeType, exampleValue = '') {\n    const formDataTableRows = [];\n    if (schema.properties) {\n      for (const fieldName in schema.properties) {\n        const fieldSchema = schema.properties[fieldName];\n        if (fieldSchema.readOnly) {\n          continue;\n        }\n\n        const fieldType = fieldSchema.type;\n        const formdataPartSchema = schemaInObjectNotation(fieldSchema, {});\n        const paramSchema = getTypeInfo(fieldSchema);\n        const formdataPartExample = generateExample(\n          '',\n          fieldSchema.example ? fieldSchema.example : '',\n          fieldSchema,\n          'json',\n          false,\n          true,\n          'text',\n          true\n        );\n\n        formDataTableRows.push(html`\n        <tr> \n          <td style=\"width:160px; min-width:100px;\">\n            <div class=\"param-name ${fieldSchema.deprecated ? 'deprecated' : ''}\">\n              ${fieldName}${!fieldSchema.deprecated && (schema.required && schema.required.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}\n            </div>\n            <div class=\"param-type\">${paramSchema.type}</div>\n          </td>  \n          <td \n            style=\"${fieldType === 'object' ? 'width:100%; padding:0;' : this.allowTry === 'true' ? '' : 'display:none;'} min-width:100px;\" \n            colspan=\"${fieldType === 'object' ? 2 : 1}\">\n            ${fieldType === 'array'\n              ? (fieldSchema.items && fieldSchema.items.format === 'binary')\n                ? html`\n                <div class=\"file-input-container col\" style='align-items:flex-end;' @click=\"${(e) => this.onAddRemoveFileInput(e, fieldName, mimeType)}\">\n                  <div class='input-set row'>\n                    <input \n                      type = \"file\"\n                      part = \"file-input\"\n                      style = \"width:100%\" \n                      data-pname = \"${fieldName}\" \n                      data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                      data-array = \"false\" \n                      data-file-array = \"true\" \n                    />\n                    <button class=\"file-input-remove-btn\"> &#x2715; </button>\n                  </div>  \n                  <button class=\"m-btn primary file-input-add-btn\" part=\"btn btn-fill\" style=\"margin:2px 25px 0 0; padding:2px 6px;\">ADD</button>\n                </div>  \n                `\n                : html`\n                  <tag-input\n                    style = \"width:100%;\" \n                    data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                    data-pname = \"${fieldName}\"\n                    data-default = \"${paramSchema.default || ''}\"\n                    data-array = \"true\"\n                    placeholder=\"${(Array.isArray(paramSchema.example) ? paramSchema.example[0] : paramSchema.example) || 'add-multiple &#x21a9;'}\"\n                    .value = \"${paramSchema.default || ''}\"\n                  >\n                  </tag-input>\n                `\n              : html`\n                ${fieldType === 'object'\n                  ? html`\n                  <div class=\"tab-panel row\" style=\"min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;\">\n                    <div style=\"width:24px; background-color:var(--light-border-color)\">\n                      <div class=\"row\" style=\"flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;\" @click=\"${(e) => {\n                        if (e.target.classList.contains('v-tab-btn')) {\n                          const tab = e.target.dataset.tab;\n                          if (tab) {\n                            const tabPanelEl = e.target.closest('.tab-panel');\n                            const selectedTabBtnEl = tabPanelEl.querySelector(`.v-tab-btn[data-tab=\"${tab}\"]`);\n                            const otherTabBtnEl = [...tabPanelEl.querySelectorAll(`.v-tab-btn:not([data-tab=\"${tab}\"])`)];\n                            const selectedTabContentEl = tabPanelEl.querySelector(`.tab-content[data-tab=\"${tab}\"]`);\n                            const otherTabContentEl = [...tabPanelEl.querySelectorAll(`.tab-content:not([data-tab=\"${tab}\"])`)];\n                            selectedTabBtnEl.classList.add('active');\n                            selectedTabContentEl.style.display = 'block';\n                            otherTabBtnEl.forEach((el) => { el.classList.remove('active'); });\n                            otherTabContentEl.forEach((el) => { el.style.display = 'none'; });\n                          }\n                        }\n                        if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; }\n                      }}\">\n                        <button class=\"v-tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab = 'model'>MODEL</button>\n                        <button class=\"v-tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}\" data-tab = 'body'>REQUEST BODY</button>\n                      </div>\n                    </div>  \n                    ${html`\n                      <div class=\"tab-content col\" data-tab = 'model' style=\"display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}; padding-left:5px; width:100%;\"> \n                        <schema-tree\n                          .data = '${formdataPartSchema}'\n                          schema-expand-level = \"${this.schemaExpandLevel}\"\n                          schema-description-expanded = \"${this.schemaDescriptionExpanded}\"> </schema-tree>\n                      </div>`\n                    }\n                    ${html`\n                      <div class=\"tab-content col\" data-tab = 'example' style=\"display:${this.activeSchemaTab === 'body' ? 'block' : 'none'}; padding-left:5px; width:100%\"> \n                        <textarea \n                          class = \"textarea\" placeholder=\"${formdataPartExample[0] && formdataPartExample[0].exampleValue || paramSchema.default || ''}\"\n                          part = \"textarea textarea-param\"\n                          style = \"width:100%; border:none; resize:vertical;\" \n                          data-array = \"false\" \n                          data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                          data-pname = \"${fieldName}\"\n                          data-default = \"${paramSchema.default || ''}\"\n                          spellcheck = \"false\"\n                        >${this.fillRequestWithDefault === 'true' ? paramSchema.default : ''}</textarea>\n                        <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->\n                        <textarea data-pname = \"hidden-${fieldName}\" data-ptype = \"${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}\" class=\"is-hidden\" style=\"display:none\">${paramSchema.default}</textarea>\n                      </div>`\n                    }\n                  </div>`\n                  : html`\n                    ${this.allowTry === 'true'\n                      ? html`<input placeholder=\"${paramSchema.example || paramSchema.default || ''}\"\n                          .value = \"${this.fillRequestWithDefault === 'true' ? (paramSchema.default || '') : ''}\"\n                          spellcheck = \"false\"\n                          type = \"${fieldSchema.format === 'binary' ? 'file' : fieldSchema.format === 'password' ? 'password' : 'text'}\"\n                          part = \"textbox textbox-param\"\n                          style = \"width:100%\"\n                          data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                          data-pname = \"${fieldName}\"\n                          data-default = \"${paramSchema.default || ''}\"\n                          data-array = \"false\"\n                        />`\n                      : ''\n                    }\n                    `\n                  }`\n              }\n          </td>\n          ${fieldType === 'object'\n            ? ''\n            : html`\n              <td>\n                ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern\n                  ? html`\n                    <div class=\"param-constraint\">\n                      ${paramSchema.pattern ? html`<span style=\"font-weight:bold\">Pattern: </span>${paramSchema.pattern}<br/>` : ''}\n                      ${paramSchema.constraint ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraint}<br/>` : ''}\n                      ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n                        ${i > 0 ? '|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n                        ${html`\n                          <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                            data-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                            data-enum=\"${v.trim()}\"\n                            @click=\"${(e) => {\n                              const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${fieldName}\"]`);\n                              if (inputEl) {\n                                if (e.target.dataset.type === 'array') {\n                                  inputEl.value = [e.target.dataset.enum];\n                                } else {\n                                  inputEl.value = e.target.dataset.enum;\n                                }\n                              }\n                            }}\"\n                          > \n                            ${v} \n                          </a>`\n                        }`)\n                      }\n                    </div>`\n                  : ''\n                }\n              </td>`\n          }\n        </tr>\n        ${fieldType === 'object'\n          ? ''\n          : html`\n            <tr>\n              <td style=\"border:none\"> </td>\n              <td colspan=\"2\" style=\"border:none; margin-top:0; padding:0 5px 8px 5px;\"> \n                <span class=\"m-markdown-small\">${unsafeHTML(marked(fieldSchema.description || ''))}</span>\n                ${paramSchema.example\n                  ? html`\n                    <span>\n                      <span style=\"font-weight:bold\"> Example: </span>\n                      ${paramSchema.type === 'array' ? '[ ' : ''}\n                      <a part=\"anchor anchor-param-example\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                        data-default-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                        data-default = \"${Array.isArray(paramSchema.example) && paramSchema.example.join('~|~') || paramSchema.example || ''}\"\n                        @click=\"${(e) => {\n                          const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${fieldName}\"]`);\n                          if (inputEl) {\n                            if (e.target.dataset.exampleType === 'array') {\n                              inputEl.value = e.target.dataset.example.split('~|~');\n                            } else {\n                              inputEl.value = e.target.dataset.example;\n                            }\n                          }\n                        }}\"\n                      >\n                        ${paramSchema.type === 'array' ? paramSchema.example.join(', ') : paramSchema.example}\n                      </a>\n                      ${paramSchema.type === 'array' ? '] ' : ''}\n                    </span>`\n                  : ''\n                }\n              </td>\n            </tr>\n          `\n        }`);\n      }\n      return html`\n        <table role=\"presentation\" style=\"width:100%;\" class=\"m-table\">\n          ${formDataTableRows}\n        </table>\n      `;\n    }\n\n    return html`\n      <textarea\n        class = \"textarea dynamic-form-param ${mimeType}\"\n        part = \"textarea textarea-param\"\n        spellcheck = \"false\"\n        data-pname=\"dynamic-form\" \n        data-ptype=\"${mimeType}\"  \n        style=\"width:100%\"\n      >${exampleValue}</textarea>\n      ${schema.description ? html`<span class=\"m-markdown-small\">${unsafeHTML(marked(schema.description))}</span>` : ''}\n    `;\n  }\n\n  apiResponseTabTemplate() {\n    const responseFormat = this.responseHeaders.includes('json') ? 'json' : (this.responseHeaders.includes('html') || this.responseHeaders.includes('xml')) ? 'html' : '';\n    return html`\n      <div class=\"row\" style=\"font-size:var(--font-size-small); margin:5px 0\">\n      ${this.responseMessage\n        ? html`<div class=\"response-message ${this.responseStatus}\">Response Status: ${this.responseMessage}\n          ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''}\n        </div>` : ''\n      }\n      <div style=\"flex:1\"></div>\n        <button class=\"m-btn\" part=\"btn btn-outline\" @click=\"${this.clearResponseData}\">CLEAR RESPONSE</button>\n      </div>\n      <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n        <div id=\"tab_buttons\" class=\"tab-buttons row\" @click=\"${(e) => {\n            if (e.target.classList.contains('tab-btn') === false) { return; }\n            this.activeResponseTab = e.target.dataset.tab;\n        }}\">\n          <button class=\"tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}\" data-tab = 'response'>RESPONSE</button>\n          <button class=\"tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}\"  data-tab = 'headers'>RESPONSE HEADERS</button>\n          <button class=\"tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}\" data-tab = 'curl'>CURL</button>\n        </div>\n        ${this.responseIsBlob\n          ? html`\n            <div class=\"tab-content col\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\">\n              <button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.downloadResponseBlob}\" part=\"btn btn-outline\">DOWNLOAD</button>\n              ${this.responseBlobType === 'view'\n                ? html`<button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.viewResponseBlob}\" part=\"btn btn-outline\">VIEW (NEW TAB)</button>`\n                : ''\n              }\n            </div>`\n          : html`\n            <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\" >\n              <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part=\"btn btn-fill\">Copy</button>\n              <pre>${responseFormat\n                ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`\n                : `${this.responseText}`\n              }\n              </pre>\n            </div>`\n        }\n        <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};\" >\n          <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part=\"btn btn-fill\">Copy</button>\n          <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>\n        </div>\n        <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};\">\n          <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\\\$/, ''), e); }}' part=\"btn btn-fill\">Copy</button>\n          <pre><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>\n        </div>\n      </div>`;\n  }\n\n  apiCallTemplate() {\n    return html`\n    <div style=\"display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);\">\n      ${\n        this.parameters.length > 0 || this.request_body\n          ? html`\n            <button class=\"m-btn thin-border\" part=\"btn btn-outline\" style=\"margin-right:5px;\" @click=\"${this.onClearRequestData}\">\n              CLEAR\n            </button>`\n          : ''\n      }\n      <button class=\"m-btn primary btn-execute thin-border\" part=\"btn btn-fill btn-try\" @click=\"${this.onTryClick}\">EXECUTE</button>\n    </div>\n    ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}\n    `;\n  }\n  /* eslint-enable indent */\n\n  onClearRequestData(e) {\n    const requestPanelEl = e.target.closest('.request-panel');\n    const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];\n    requestPanelInputEls.forEach((el) => { el.value = ''; });\n  }\n\n  async onTryClick() {\n    const tryBtnEl = this.querySelectorAll('.btn-execute')[0];\n    let fetchUrl;\n    let curlUrl;\n    let curl = '';\n    let curlHeaders = '';\n    let curlData = '';\n    let curlForm = '';\n    const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');\n    const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];\n    const acceptHeader = respEl && respEl.selectedMimeType;\n    const requestPanelEl = this.closest('.request-panel');\n    const pathParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='path']\")];\n    const queryParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query']\")];\n    const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query-object']\")];\n    const headerParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='header']\")];\n    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');\n\n    fetchUrl = this.path;\n    const fetchOptions = {\n      method: this.method.toUpperCase(),\n      headers: new Headers()\n    };\n    // Generate URL using Path Params\n    pathParamEls.map((el) => {\n      fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value));\n    });\n\n    // Query Params\n    const urlQueryParam = new URLSearchParams();\n    if (queryParamEls.length > 0) {\n      queryParamEls.forEach((el) => {\n        if (el.dataset.array === 'false') {\n          if (el.value !== '') {\n            urlQueryParam.append(el.dataset.pname, el.value);\n          }\n        } else {\n          const paramSerializeStyle = el.dataset.paramSerializeStyle;\n          const paramSerializeExplode = el.dataset.paramSerializeExplode;\n          let vals = ((el.value && Array.isArray(el.value)) ? el.value : []);\n          vals = Array.isArray(vals) ? vals.filter((v) => v !== '') : [];\n          if (vals.length > 0) {\n            if (paramSerializeStyle === 'spaceDelimited') {\n              urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\\s|\\s$/g, ''));\n            } else if (paramSerializeStyle === 'pipeDelimited') {\n              urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\\||\\|$/g, ''));\n            } else {\n              if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n                vals.forEach((v) => { urlQueryParam.append(el.dataset.pname, v); });\n              } else {\n                urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));\n              }\n            }\n          }\n        }\n      });\n    }\n\n    // Query Params (Dynamic - create from JSON)\n    if (queryParamObjTypeEls.length > 0) {\n      queryParamObjTypeEls.map((el) => {\n        try {\n          let queryParamObj = {};\n          const paramSerializeStyle = el.dataset.paramSerializeStyle;\n          const paramSerializeExplode = el.dataset.paramSerializeExplode;\n          queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\\s+/g, ' ')));\n          for (const key in queryParamObj) {\n            if (typeof queryParamObj[key] === 'object') {\n              if (Array.isArray(queryParamObj[key])) {\n                if (paramSerializeStyle === 'spaceDelimited') {\n                  urlQueryParam.append(key, queryParamObj[key].join(' '));\n                } else if (paramSerializeStyle === 'pipeDelimited') {\n                  urlQueryParam.append(key, queryParamObj[key].join('|'));\n                } else {\n                  if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n                    queryParamObj[key].forEach((v) => {\n                      urlQueryParam.append(key, v);\n                    });\n                  } else {\n                    urlQueryParam.append(key, queryParamObj[key]);\n                  }\n                }\n              }\n            } else {\n              urlQueryParam.append(key, queryParamObj[key]);\n            }\n          }\n        } catch (err) {\n          console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console\n        }\n      });\n    }\n\n    // Add Authentication api keys if provided\n    this.api_keys.filter((v) => v.finalKeyValue).forEach((v) => {\n      if (v.in === 'query') {\n        urlQueryParam.append(v.name, v.finalKeyValue);\n        return;\n      }\n\n      // Otherwise put it in the header\n      fetchOptions.headers.append(v.name, v.finalKeyValue);\n      curlHeaders += ` -H \"${v.name}: ${v.finalKeyValue}\" \\\\\\n`;\n    });\n\n    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;\n\n    // Final URL for API call\n    fetchUrl = `${this.serverUrl.replace(/\\/$/, '')}${fetchUrl}`;\n    if (fetchUrl.startsWith('http') === false) {\n      const url = new URL(fetchUrl, window.location.href);\n      curlUrl = url.href;\n    } else {\n      curlUrl = fetchUrl;\n    }\n    curl = `curl -X ${this.method.toUpperCase()} \"${curlUrl}\" \\\\\\n`;\n\n    if (acceptHeader) {\n      // Uses the acceptHeader from Response panel\n      fetchOptions.headers.append('Accept', acceptHeader);\n      curlHeaders += ` -H \"Accept: ${acceptHeader}\" \\\\\\n`;\n    } else if (this.accept) {\n      fetchOptions.headers.append('Accept', this.accept);\n      curlHeaders += ` -H \"Accept: ${this.accept}\" \\\\\\n`;\n    }\n\n    // Add Header Params\n    headerParamEls.map((el) => {\n      if (el.value) {\n        fetchOptions.headers.append(el.dataset.pname, el.value);\n        curlHeaders += ` -H \"${el.dataset.pname}: ${el.value}\" \\\\\\n`;\n      }\n    });\n\n    // Request Body Params\n    if (requestBodyContainerEl) {\n      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;\n      if (requestBodyType.includes('form-urlencoded')) {\n        // url-encoded Form Params (dynamic) - Parse JSON and generate Params\n        const formUrlDynamicTextAreaEl = requestPanelEl.querySelector(\"[data-ptype='dynamic-form']\");\n        if (formUrlDynamicTextAreaEl) {\n          const val = formUrlDynamicTextAreaEl.value;\n          const formUrlDynParams = new URLSearchParams();\n          let proceed = true;\n          let tmpObj;\n          if (val) {\n            try {\n              tmpObj = JSON.parse(val);\n            } catch (err) {\n              proceed = false;\n              console.warn('OpenAPI Explorer: Invalid JSON provided', err); // eslint-disable-line no-console\n            }\n          } else {\n            proceed = false;\n          }\n          if (proceed) {\n            for (const prop in tmpObj) {\n              formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));\n            }\n            fetchOptions.body = formUrlDynParams;\n            curlData = ` -d ${formUrlDynParams.toString()} \\\\\\n`;\n          }\n        } else {\n          // url-encoded Form Params (regular)\n          const formUrlEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-urlencode']\")];\n          const formUrlParams = new URLSearchParams();\n          formUrlEls\n            .filter((v) => (v.type !== 'file'))\n            .forEach((el) => {\n              if (el.dataset.array === 'false') {\n                if (el.value) {\n                  formUrlParams.append(el.dataset.pname, el.value);\n                }\n              } else {\n                const vals = (el.value && Array.isArray(el.value)) ? el.value.join(',') : '';\n                formUrlParams.append(el.dataset.pname, vals);\n              }\n            });\n          fetchOptions.body = formUrlParams;\n          curlData = ` -d ${formUrlParams.toString()} \\\\\\n`;\n        }\n      } else if (requestBodyType.includes('form-data')) {\n        const formDataParams = new FormData();\n        const formDataEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-data']\")];\n        formDataEls.forEach((el) => {\n          if (el.dataset.array === 'false') {\n            if (el.type === 'file' && el.files[0]) {\n              formDataParams.append(el.dataset.pname, el.files[0], el.files[0].name);\n              curlForm += ` -F \"${el.dataset.pname}=@${el.files[0].name}\" \\\\\\n`;\n            } else if (el.value) {\n              formDataParams.append(el.dataset.pname, el.value);\n              curlForm += ` -F \"${el.dataset.pname}=${el.value}\" \\\\\\n`;\n            }\n          } else if (el.value && Array.isArray(el.value)) {\n            el.value.forEach((v) => {\n              curlForm = `${curlForm} -F \"${el.dataset.pname}[]=${v}\" \\\\\\n`;\n            });\n            formDataParams.append(el.dataset.pname, el.value.join(','));\n          }\n        });\n        fetchOptions.body = formDataParams;\n      } else if (mediaFileRegex.test(requestBodyType) || textFileRegex.test(requestBodyType)) {\n        const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');\n        if (bodyParamFileEl && bodyParamFileEl.files[0]) {\n          fetchOptions.body = bodyParamFileEl.files[0];\n          curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\\\\n`;\n        }\n      } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {\n        const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');\n        if (exampleTextAreaEl && exampleTextAreaEl.value) {\n          fetchOptions.body = exampleTextAreaEl.value;\n          if (requestBodyType.includes('json')) {\n            try {\n              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\\\\n`;\n            } catch (err) { /* Ignore unparseable JSON */ }\n          }\n\n          if (!curlData) {\n            // Save single quotes wrapped => 'text' => `\"'\"text\"'\"`\n            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\\'\"\\'\"\\'')}' \\\\\\n`;\n          }\n        }\n      }\n      // Common for all request-body\n      if (!requestBodyType.includes('form-data')) {\n        // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries\n        fetchOptions.headers.append('Content-Type', requestBodyType);\n      }\n      curlHeaders += ` -H \"Content-Type: ${requestBodyType}\" \\\\\\n`;\n    }\n    this.curlSyntax = '';\n    this.responseIsBlob = false;\n\n    this.respContentDisposition = '';\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;\n    if (this.fetchCredentials) {\n      fetchOptions.credentials = this.fetchCredentials;\n    }\n\n    const fetchRequest = { url: fetchUrl, options: fetchOptions };\n    const event = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        request: fetchRequest,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('before-try', event));\n    this.dispatchEvent(new CustomEvent('request', event));\n    const fetchRequestObject = new Request(fetchUrl, fetchOptions);\n\n    let fetchResponse;\n    try {\n      let respBlob;\n      let respJson;\n      let respText;\n      tryBtnEl.disabled = true;\n      const fetchStart = new Date();\n\n      this.responseStatus = '';\n      this.responseMessage = '';\n      this.responseUrl = '';\n      this.responseHeaders = '';\n      this.responseText = '⌛';\n\n      this.requestUpdate();\n      const awaiter = new Promise(resolve => setTimeout(resolve, 200));\n      fetchResponse = await fetch(fetchRequestObject);\n      this.responseElapsedMs = new Date() - fetchStart;\n      await awaiter;\n\n      tryBtnEl.disabled = false;\n      this.responseStatus = fetchResponse.ok ? 'success' : 'error';\n      this.responseMessage = fetchResponse.statusText ? `${fetchResponse.statusText} (${fetchResponse.status})` : fetchResponse.status;\n      this.responseUrl = fetchResponse.url;\n      this.responseHeaders = '';\n      const headers = {};\n      fetchResponse.headers.forEach((hdrVal, hdr) => {\n        this.responseHeaders = `${this.responseHeaders}${hdr.trim()}: ${hdrVal}\\n`;\n        headers[hdr.trim()] = hdrVal && hdrVal.trim();\n      });\n      const contentType = fetchResponse.headers.get('content-type');\n      const respEmpty = (await fetchResponse.clone().text()).length === 0;\n      if (respEmpty) {\n        this.responseText = '';\n      } else if (contentType) {\n        if (contentType.includes('json')) {\n          if ((/charset=[^\"']+/).test(contentType)) {\n            const encoding = contentType.split('charset=')[1];\n            const buffer = await fetchResponse.arrayBuffer();\n            try {\n              respText = new TextDecoder(encoding).decode(buffer);\n            } catch {\n              respText = new TextDecoder('utf-8').decode(buffer);\n            }\n            try {\n              this.responseText = JSON.stringify(JSON.parse(respText), null, 8);\n            } catch {\n              this.responseText = respText;\n            }\n          } else {\n            respJson = await fetchResponse.json();\n            this.responseText = JSON.stringify(respJson, null, 8);\n          }\n        } else if (textFileRegex.test(contentType)) {\n          this.responseIsBlob = true;\n          this.responseBlobType = 'download';\n        } else if (mediaFileRegex.test(contentType)) {\n          this.responseIsBlob = true;\n          this.responseBlobType = 'view';\n        } else {\n          respText = await fetchResponse.text();\n          if (contentType.includes('xml')) {\n            this.responseText = formatXml(respText, { textNodesOnSameLine: true, indentor: ' ' });\n          } else {\n            this.responseText = respText;\n          }\n        }\n        if (this.responseIsBlob) {\n          const contentDisposition = fetchResponse.headers.get('content-disposition');\n          const filenameRegex = /filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/;\n          const filename = filenameRegex.exec(contentDisposition);\n          this.respContentDisposition = filename && filename[1] && filename[1].replace(/['\"]/g, '') || `download.${mimeTypeResolver.extension(contentType) || 'file'}`;\n          respBlob = await fetchResponse.blob();\n          this.responseBlobUrl = URL.createObjectURL(respBlob);\n        }\n      } else {\n        respText = await fetchResponse.text();\n        this.responseText = respText;\n      }\n      const responseEvent = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          request: fetchRequest,\n          response: {\n            headers,\n            body: respJson || respText || respBlob || fetchResponse.body,\n            status: fetchResponse.status,\n          },\n        },\n      };\n      this.dispatchEvent(new CustomEvent('after-try', responseEvent));\n      this.dispatchEvent(new CustomEvent('response', responseEvent));\n    } catch (error) {\n      tryBtnEl.disabled = false;\n      this.responseMessage = `${error.message} (Check the browser network tab for more information.)`;\n      this.responseStatus = 'error';\n      const responseEvent = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          error,\n          request: fetchRequest,\n        },\n      };\n      document.dispatchEvent(new CustomEvent('after-try', responseEvent));\n      document.dispatchEvent(new CustomEvent('response', responseEvent));\n    }\n  }\n\n  onAddRemoveFileInput(e, pname, ptype) {\n    if (e.target.tagName.toLowerCase() !== 'button') {\n      return;\n    }\n\n    if (e.target.classList.contains('file-input-remove-btn')) {\n      // Remove File Input Set\n      const el = e.target.closest('.input-set');\n      el.remove();\n      return;\n    }\n    const el = e.target.closest('.file-input-container');\n\n    // Add File Input Set\n\n    // Container\n    const newInputContainerEl = document.createElement('div');\n    newInputContainerEl.setAttribute('class', 'input-set row');\n\n    // File Input\n    const newInputEl = document.createElement('input');\n    newInputEl.type = 'file';\n    newInputEl.style = 'width:200px; margin-top:2px;';\n    newInputEl.setAttribute('data-pname', pname);\n    newInputEl.setAttribute('data-ptype', ptype.includes('form-urlencode') ? 'form-urlencode' : 'form-data');\n    newInputEl.setAttribute('data-array', 'false');\n    newInputEl.setAttribute('data-file-array', 'true');\n\n    // Remover Button\n    const newRemoveBtnEl = document.createElement('button');\n    newRemoveBtnEl.setAttribute('class', 'file-input-remove-btn');\n    newRemoveBtnEl.innerHTML = '&#x2715;';\n\n    newInputContainerEl.appendChild(newInputEl);\n    newInputContainerEl.appendChild(newRemoveBtnEl);\n    el.insertBefore(newInputContainerEl, e.target);\n    // el.appendChild(newInputContainerEl);\n  }\n\n  downloadResponseBlob() {\n    if (this.responseBlobUrl) {\n      const a = document.createElement('a');\n      document.body.appendChild(a);\n      a.style = 'display: none';\n      a.href = this.responseBlobUrl;\n      a.download = this.respContentDisposition;\n      a.click();\n      a.remove();\n    }\n  }\n\n  viewResponseBlob() {\n    if (this.responseBlobUrl) {\n      const a = document.createElement('a');\n      document.body.appendChild(a);\n      a.style = 'display: none';\n      a.href = this.responseBlobUrl;\n      a.target = '_blank';\n      a.click();\n      a.remove();\n    }\n  }\n\n  clearResponseData() {\n    this.responseUrl = '';\n    this.responseHeaders = '';\n    this.responseText = '';\n    this.responseStatus = '';\n    this.responseMessage = '';\n    this.responseElapsedMs = 0;\n    this.responseIsBlob = false;\n    this.responseBlobType = '';\n    this.respContentDisposition = '';\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n  }\n\n  requestParamFunction(event) {\n    if (event.key === 'Enter') {\n      this.onTryClick();\n      event.preventDefault();\n    }\n  }\n\n  disconnectedCallback() {\n    // Cleanup ObjectURL forthe blob data if this component created one\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n    super.disconnectedCallback();\n  }\n}\n\n// Register the element with the browser\nif (!customElements.get('openapi-explorer')) {\n  customElements.define('api-request', ApiRequest);\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"openapi-explorer.min.js","mappings":";;AAyBA;ACtBA;AC4tBA","sources":["webpack://openapi-explorer/./src/templates/code-samples-template.js","webpack://openapi-explorer/./src/templates/callback-template.js","webpack://openapi-explorer/./src/components/api-request.js"],"sourcesContent":["import { html } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport Prism from 'prismjs';\nimport { copyToClipboard } from '../utils/common-utils';\n\n/* eslint-disable indent */\nexport default function codeSamplesTemplate(xCodeSamples) {\n  return html`\n  <section class=\"table-title top-gap\"> CODE SAMPLES </div>\n  <div class=\"tab-panel col\"\n    @click=\"${\n      (e) => {\n        if (!e.target.classList.contains('tab-btn')) { return; }\n        const clickedTab = e.target.dataset.tab;\n\n        const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];\n        const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];\n        tabButtons.forEach((tabBtnEl) => tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? 'add' : 'remove']('active'));\n        tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });\n      }\n    }\">\n    <div class=\"tab-buttons row\" style=\"width:100; overflow\">\n      ${xCodeSamples.map((v, i) => html`<button class=\"tab-btn ${i === 0 ? 'active' : ''}\" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}\n    </div>\n    ${xCodeSamples.map((v, i) => html`\n      <div class=\"tab-content m-markdown code-sample-wrapper\" style= \"display:${i === 0 ? 'block' : 'none'}\" data-tab = '${v.lang}${i}'>\n        <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(v.source, e); }}'>Copy</button>\n        <pre>\n          <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>\n        </pre>\n      </div>`)\n    }\n  </section>`;\n}\n/* eslint-enable indent */\n","import { html } from 'lit-element';\n\n/* eslint-disable indent */\nexport default function callbackTemplate(callbacks) {\n  return html`\n  <div class=\"api-request col regular-font request-panel ${this.renderStyle}-mode\">\n    ${Object.entries(callbacks).map((kv) => html`\n      <div class=\"${this.renderStyle}-request\"> \n        <div class=\"req-res-title\">CALLBACKS</div>\n        <div class=\"table-title\">${kv[0]}</div>\n        ${Object.entries(kv[1]).map((pathObj) => html`\n          <div class=\"mono-font small-font-size\" style=\"display:flex;\">\n            <div style=\"width:100%\"> \n              ${Object.entries(pathObj[1]).map((method) => html`\n                <div>\n                  <div style=\"margin-top:12px;\">\n                    <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\"> \n                      <span style=\"font-size:20px;\"> &#x2944; </span> \n                      ${method[0]} \n                    </div>\n                    <span style=\"line-height:20px; vertical-align: baseline;\">${pathObj[0]} </span>\n                  </div>  \n                  <div class='expanded-req-resp-container'>\n                    <api-request class=\"request-panel\"\n                      callback = \"true\"\n                      method = \"${method[0] || ''}\", \n                      path = \"${pathObj[0] || ''}\" \n                      .parameters = \"${method[1] && method[1].parameters || ''}\" \n                      .request_body = \"${method[1] && method[1].requestBody || ''}\"\n                      fill-defaults = \"${this.fillRequestWithDefault}\"\n                      enable-console = \"false\"\n                      render-style=\"${this.renderStyle}\" \n                      schema-style=\"${this.displaySchemaAsTable ? 'table' : 'tree'}\"\n                      active-schema-tab = \"${this.defaultSchemaTab}\"\n                      schema-expand-level = \"${this.schemaExpandLevel}\"\n                      schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n                      schema-hide-read-only = \"${this.schemaHideReadOnly}\"\n                      fetch-credentials = \"${this.fetchCredentials}\"\n                      exportparts=\"btn btn-fill btn-outline btn-try\">\n                    </api-request>\n\n                    <api-response\n                      callback = \"true\"\n                      .responses=\"${method[1] && method[1].responses}\"\n                      render-style=\"${this.renderStyle}\"\n                      schema-style=\"${this.displaySchemaAsTable ? 'table' : 'tree'}\"\n                      active-schema-tab = \"${this.defaultSchemaTab}\"\n                      schema-expand-level = \"${this.schemaExpandLevel}\"\n                      schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n                      exportparts = \"btn--resp btn-fill--resp btn-outline--resp\"\n                    > </api-response>\n                  </div>\n                </div>  \n              `)}\n            </div>  \n          </div>  \n        `)}\n      </div>  \n    `)}\n  </div>\n  `;\n}\n/* eslint-enable indent */\n","import { LitElement, html } from 'lit-element';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport mimeTypeResolver from './mime-types';\n\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport formatXml from 'xml-but-prettier';\n\nimport { copyToClipboard } from '../utils/common-utils';\nimport { schemaInObjectNotation, getTypeInfo, generateExample } from '../utils/schema-utils';\nimport './json-tree';\nimport './schema-tree';\nimport './tag-input';\n\nconst textFileRegex = RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application/vnd.');\nconst mediaFileRegex = RegExp('^audio/|^image/|^video/');\nconst truncateString = (str, length) => (str && str.length > length ? `${str.substring(0, length - 1)}…` : str);\n\nexport default class ApiRequest extends LitElement {\n  createRenderRoot() { return this; }\n\n  constructor() {\n    super();\n    this.responseMessage = '';\n    this.responseStatus = '';\n    this.responseHeaders = '';\n    this.responseText = '';\n    this.responseUrl = '';\n    this.responseElapsedMs = 0;\n    this.curlSyntax = '';\n    this.activeResponseTab = 'response'; // allowed values: response, headers, curl\n    this.selectedRequestBodyType = '';\n    this.selectedRequestBodyExample = '';\n  }\n\n  static get properties() {\n    return {\n      serverUrl: { type: String, attribute: 'server-url' },\n      servers: { type: Array },\n      method: { type: String },\n      path: { type: String },\n      parameters: { type: Array },\n      request_body: { type: Object },\n      api_keys: { type: Array },\n      parser: { type: Object },\n      accept: { type: String },\n      callback: { type: String },\n      responseMessage: { type: String, attribute: false },\n      responseText: { type: String, attribute: false },\n      responseHeaders: { type: String, attribute: false },\n      responseStatus: { type: String, attribute: false },\n      responseUrl: { type: String, attribute: false },\n      responseElapsedMs: { type: Number, attribute: false },\n      fillRequestWithDefault: { type: String, attribute: 'fill-defaults' },\n      allowTry: { type: String, attribute: 'enable-console' },\n      renderStyle: { type: String, attribute: 'render-style' },\n      schemaStyle: { type: String, attribute: 'schema-style' },\n      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },\n      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },\n      schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },\n      fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n      // properties for internal tracking\n      activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute\n      selectedRequestBodyType: { type: String, attribute: 'selected-request-body-type' }, // internal tracking of selected request-body type\n      selectedRequestBodyExample: { type: String, attribute: 'selected-request-body-example' }, // internal tracking of selected request-body example\n    };\n  }\n\n  render() {\n    return html`\n    <div class=\"api-request col regular-font request-panel ${(this.renderStyle === 'focused' || this.callback === 'true') ? 'focused-mode' : 'view-mode'}\">\n      <div class=\" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} \"> \n        ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}\n      </div>\n      <div>\n        ${this.inputParametersTemplate('path')}\n        ${this.inputParametersTemplate('query')}\n        ${this.requestBodyTemplate()}\n        ${this.inputParametersTemplate('header')}\n        ${this.inputParametersTemplate('cookie')}\n        ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}\n      </div>  \n    </div>\n    `;\n  }\n\n  updated(changedProperties) {\n    // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.\n    // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually\n    if (this.renderStyle !== 'focused') {\n      return;\n    }\n\n    // dont update example as only tabs is switched\n    if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {\n      return;\n    }\n\n    const exampleTextAreaEls = [...this.querySelectorAll('textarea[data-ptype=\"form-data\"]')];\n    exampleTextAreaEls.forEach((el) => {\n      const origExampleEl = this.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);\n      if (origExampleEl) {\n        el.value = origExampleEl.value;\n      }\n    });\n  }\n\n  /* eslint-disable indent */\n  inputParametersTemplate(paramType) {\n    const filteredParams = this.parameters ? this.parameters.filter((param) => param.in === paramType) : [];\n    if (filteredParams.length === 0) {\n      return '';\n    }\n    let title = '';\n    if (paramType === 'path') {\n      title = 'PATH PARAMETERS';\n    } else if (paramType === 'query') {\n      title = 'QUERY-STRING PARAMETERS';\n    } else if (paramType === 'header') {\n      title = 'REQUEST HEADERS';\n    } else if (paramType === 'cookie') {\n      title = 'COOKIES';\n    }\n\n    const tableRows = [];\n    for (const param of filteredParams) {\n      if (!param.schema) {\n        continue;\n      }\n      const paramSchema = getTypeInfo(param.schema);\n      if (!paramSchema) {\n        continue;\n      }\n      const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;\n      let paramStyle = 'form';\n      let paramExplode = true;\n      if (paramType === 'query') {\n        if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {\n          paramStyle = param.style;\n        }\n        if (typeof param.explode === 'boolean') {\n          paramExplode = param.explode;\n        }\n      }\n\n      tableRows.push(html`\n      <tr> \n        <td style=\"width:160px; min-width:50px;\">\n          <div class=\"param-name ${paramSchema.deprecated ? 'deprecated' : ''}\">\n            ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'>*</span>` : ''}\n          </div>\n          <div class=\"param-type\">\n            ${paramSchema.type === 'array'\n              ? `${paramSchema.arrayType}`\n              : `${paramSchema.format ? paramSchema.format : paramSchema.type}`\n            }${!paramSchema.deprecated && param.required ? html`<span style='opacity: 0;'>*</span>` : ''}\n          </div>\n        </td>  \n        ${this.allowTry === 'true'\n          ? html`\n            <td style=\"min-width:160px;\">\n              ${paramSchema.type === 'array'\n                ? html`\n                  <tag-input class=\"request-param\" \n                    style = \"width:100%;\" \n                    data-ptype = \"${paramType}\"\n                    data-pname = \"${param.name}\"\n                    data-default = \"${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}\"\n                    data-param-serialize-style = \"${paramStyle}\"\n                    data-param-serialize-explode = \"${paramExplode}\"\n                    data-array = \"true\"\n                    placeholder=\"${paramSchema.example || (Array.isArray(defaultVal) ? defaultVal[0] : defaultVal) || 'add-multiple &#x21a9;'}\"\n                    .value = \"${Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}\"\n                  >\n                  </tag-input>`\n                : paramSchema.type === 'object'\n                  ? html`\n                    <textarea \n                      class = \"textarea request-param\"\n                      part = \"textarea textarea-param\"\n                      data-ptype = \"${paramType}-object\"\n                      data-pname = \"${param.name}\"\n                      data-default = \"${defaultVal}\"\n                      data-param-serialize-style = \"${paramStyle}\"\n                      data-param-serialize-explode = \"${paramExplode}\"\n                      spellcheck = \"false\"\n                      placeholder=\"${paramSchema.example || defaultVal || ''}\"\n                      style = \"resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};\"\n                    >${this.fillRequestWithDefault === 'true' ? defaultVal : ''}</textarea>`\n                  : html`\n                    <input type=\"${paramSchema.format === 'password' ? 'password' : 'text'}\" spellcheck=\"false\" style=\"width:100%\" placeholder=\"${paramSchema.example || defaultVal || ''}\"\n                      class=\"request-param\"\n                      part=\"textbox textbox-param\"\n                      data-ptype=\"${paramType}\"\n                      data-pname=\"${param.name}\" \n                      data-default=\"${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}\"\n                      data-array=\"false\"\n                      @keyup=\"${this.requestParamFunction}\"\n                      .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"\n                    />`\n                }\n            </td>`\n          : ''\n        }\n        ${this.renderStyle === 'focused'\n          ? html`\n            <td>\n              ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern\n                ? html`\n                  <div class=\"param-constraint\">\n                    ${paramSchema.constraint ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraint}<br>` : ''}\n                    ${paramSchema.pattern ? html`<span style=\"font-weight:bold\">Pattern: </span>${truncateString(paramSchema.pattern, 60)}<br>` : ''}\n                    ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n                      ${i > 0 ? '|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n                      ${html`\n                        <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                          data-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                          data-enum=\"${v.trim()}\"\n                          @click=\"${(e) => {\n                            const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${param.name}\"]`);\n                            if (inputEl) {\n                              if (e.target.dataset.type === 'array') {\n                                inputEl.value = [e.target.dataset.enum];\n                              } else {\n                                inputEl.value = e.target.dataset.enum;\n                              }\n                            }\n                          }}\"\n                        >\n                          ${v} \n                        </a>`\n                      }`)}\n                  </div>`\n                : ''\n              }\n            </td>  \n          </tr>`\n        : ''\n      }\n    `);\n    }\n\n    return html`\n    <div class=\"table-title top-gap\">${title}${paramType === 'path' ? html`<span style='color:var(--red);'>*</span>` : ''}</div>\n    <div style=\"display:block; overflow-x:auto; max-width:100%;\">\n      <table role=\"presentation\" class=\"m-table\" style=\"width:100%; word-break:break-word;\">\n        ${tableRows}\n      </table>\n    </div>`;\n  }\n\n  resetRequestBodySelection() {\n    this.selectedRequestBodyType = '';\n    this.selectedRequestBodyExample = '';\n    this.clearResponseData();\n  }\n\n  // Request-Body Event Handlers\n  onSelectExample(e) {\n    this.selectedRequestBodyExample = e.target.value;\n    const exampleDropdownEl = e.target;\n    window.setTimeout((selectEl) => {\n      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');\n      const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');\n      userInputExampleTextareaEl.value = exampleTextareaEl.value;\n    }, 0, exampleDropdownEl);\n  }\n\n  onMimeTypeChange(e) {\n    this.selectedRequestBodyType = e.target.value;\n    const mimeDropdownEl = e.target;\n    this.selectedRequestBodyExample = '';\n    window.setTimeout((selectEl) => {\n      const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');\n      if (exampleTextareaEl) {\n        const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');\n        userInputExampleTextareaEl.value = exampleTextareaEl.value;\n      }\n    }, 0, mimeDropdownEl);\n  }\n\n  requestBodyTemplate() {\n    if (!this.request_body) {\n      return '';\n    }\n    if (Object.keys(this.request_body).length === 0) {\n      return '';\n    }\n\n    // Variable to store partial HTMLs\n    let reqBodyTypeSelectorHtml = '';\n    let reqBodyFileInputHtml = '';\n    let reqBodyFormHtml = '';\n    let reqBodySchemaHtml = '';\n    let reqBodyExampleHtml = '';\n\n    const requestBodyTypes = [];\n    const content = this.request_body.content;\n    for (const mimeType in content) {\n      requestBodyTypes.push({\n        mimeType,\n        schema: content[mimeType].schema,\n        example: content[mimeType].example,\n        examples: content[mimeType].examples,\n      });\n      if (!this.selectedRequestBodyType) {\n        this.selectedRequestBodyType = mimeType;\n      }\n    }\n    // MIME Type selector\n    reqBodyTypeSelectorHtml = requestBodyTypes.length === 1\n      ? ''\n      : html`\n        <select aria-label=\"mime type\" style=\"min-width:100px; max-width:100%;  margin-bottom:-1px;\" @change = '${(e) => this.onMimeTypeChange(e)}'>\n          ${requestBodyTypes.map((reqBody) => html`\n            <option value = '${reqBody.mimeType}' ?selected = '${reqBody.mimeType === this.selectedRequestBodyType}'>\n              ${reqBody.mimeType}\n            </option> `)\n          }\n        </select>\n      `;\n\n    // For Loop - Main\n    requestBodyTypes.forEach((reqBody) => {\n      let reqBodyExamples = [];\n\n      if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {\n        // Generate Example\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          reqBodyExamples = generateExample(\n            reqBody.examples ? reqBody.examples : '',\n            reqBody.example ? reqBody.example : '',\n            reqBody.schema,\n            reqBody.mimeType,\n            false,\n            true,\n            'text',\n            true\n          );\n          if (!this.selectedRequestBodyExample) {\n            this.selectedRequestBodyExample = (reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '');\n          }\n          reqBodyExampleHtml = html`\n            ${reqBodyExampleHtml}\n            <div class = 'example-panel border-top pad-top-8'>\n              ${reqBodyExamples.length === 1\n                ? ''\n                : html`\n                  <select aria-label='request body example' style=\"min-width:100px; max-width:100%;  margin-bottom:-1px;\" @change='${(e) => this.onSelectExample(e)}'>\n                    ${reqBodyExamples.map((v) => html`<option value=\"${v.exampleId}\" ?selected=${v.exampleId === this.selectedRequestBodyExample} > \n                      ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} \n                    </option>`)}\n                  </select>\n                `\n              }\n              ${reqBodyExamples\n                .filter((v) => v.exampleId === this.selectedRequestBodyExample)\n                .map((v) => html`\n                <div class=\"example ${v.exampleId === this.selectedRequestBodyExample ? 'example-selected' : ''}\" data-default = '${v.exampleId}'>\n                  ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style=\"padding: 4px 0\"> ${v.exampleSummary} </div>` : ''}\n                  ${v.exampleDescription ? html`<div class=\"m-markdown-small\" style=\"padding: 4px 0\"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''}\n                  <!-- this textarea is for user to edit the example -->\n                  <textarea \n                    class = \"textarea request-body-param-user-input\"\n                    part = \"textarea textarea-param\"\n                    spellcheck = \"false\"\n                    data-ptype = \"${reqBody.mimeType}\" \n                    data-default = \"${v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8)}\"\n                    data-default-format = \"${v.exampleFormat}\"\n                    style=\"width:100%; resize:vertical;\"\n                  >${this.fillRequestWithDefault === 'true'\n                      ? (v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8))\n                      : ''\n                    }</textarea>\n                  <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->\n                  <textarea \n                    class = \"textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}\" \n                    spellcheck = \"false\"\n                    data-ptype = \"${reqBody.mimeType}\" \n                    style=\"width:100%; resize:vertical; display:none\"\n                  >${(v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8))}</textarea>\n                </div>  \n              `)}\n\n            </div>\n          `;\n        }\n      } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          const ex = generateExample(\n            reqBody.examples ? reqBody.examples : '',\n            reqBody.example ? reqBody.example : '',\n            reqBody.schema,\n            reqBody.mimeType,\n            false,\n            true,\n            'text',\n            true\n          );\n          if (reqBody.schema) {\n            reqBodyFormHtml = this.formDataTemplate(reqBody.schema, reqBody.mimeType, (ex[0] ? ex[0].exampleValue : ''));\n          }\n        }\n      } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {\n        if (reqBody.mimeType === this.selectedRequestBodyType) {\n          reqBodyFileInputHtml = html`\n            <div class = \"small-font-size bold-text row\">\n              <input type=\"file\" part=\"file-input\" style=\"max-width:100%\" class=\"request-body-param-file\" data-ptype=\"${reqBody.mimeType}\" spellcheck=\"false\" />\n            </div>  \n          `;\n        }\n      }\n\n      // Generate Schema\n      if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text')) {\n        const schemaAsObj = schemaInObjectNotation(reqBody.schema, {});\n        if (this.schemaStyle === 'table') {\n          reqBodySchemaHtml = html`\n            ${reqBodySchemaHtml}\n            <schema-table\n              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n              .data = '${schemaAsObj}'\n              schema-expand-level = \"${this.schemaExpandLevel}\"\n              schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n              schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n              schema-hide-write-only = false\n            > </schema-table>\n          `;\n        } else {\n          reqBodySchemaHtml = html`\n            ${reqBodySchemaHtml}\n            <schema-tree\n              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n              .data = '${schemaAsObj}'\n              schema-expand-level = \"${this.schemaExpandLevel}\"\n              schema-description-expanded = \"${this.schemaDescriptionExpanded}\"\n              schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n              schema-hide-write-only = false\n            > </schema-tree>\n          `;\n        }\n      }\n    });\n\n    return html`\n      <div class='request-body-container' data-selected-request-body-type=\"${this.selectedRequestBodyType}\">\n        <div class=\"table-title top-gap row\">\n          REQUEST BODY ${this.request_body.required ? html`<span class=\"mono-font\" style='color:var(--red)'>*</span>` : ''} \n          <span style = \"font-weight:normal; margin-left:5px\"> ${this.selectedRequestBodyType}</span>\n          <span style=\"flex:1\"></span>\n          ${reqBodyTypeSelectorHtml}\n        </div>\n        ${this.request_body.description ? html`<div class=\"m-markdown\" style=\"margin-bottom:12px\">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}\n        \n        ${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text'))\n          ? html`\n            <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n              <div class=\"tab-buttons row\" @click=\"${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}\">\n                <button class=\"tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab=\"model\" >MODEL</button>\n                <button class=\"tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}\" data-tab=\"body\">BODY</button>\n              </div>\n              ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'block' : 'none'}\"> ${reqBodySchemaHtml}</div>`}\n              ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'none' : 'block'}\"> ${reqBodyExampleHtml}</div>`}\n            </div>`\n          : html`  \n            ${reqBodyFileInputHtml}\n            ${reqBodyFormHtml}`\n        }\n      </div>  \n    `;\n  }\n\n  formDataTemplate(schema, mimeType, exampleValue = '') {\n    const formDataTableRows = [];\n    if (schema.properties) {\n      for (const fieldName in schema.properties) {\n        const fieldSchema = schema.properties[fieldName];\n        if (fieldSchema.readOnly) {\n          continue;\n        }\n\n        const fieldType = fieldSchema.type;\n        const formdataPartSchema = schemaInObjectNotation(fieldSchema, {});\n        const paramSchema = getTypeInfo(fieldSchema);\n        const formdataPartExample = generateExample(\n          '',\n          fieldSchema.example ? fieldSchema.example : '',\n          fieldSchema,\n          'json',\n          false,\n          true,\n          'text',\n          true\n        );\n\n        formDataTableRows.push(html`\n        <tr> \n          <td style=\"width:160px; min-width:100px;\">\n            <div class=\"param-name ${fieldSchema.deprecated ? 'deprecated' : ''}\">\n              ${fieldName}${!fieldSchema.deprecated && (schema.required && schema.required.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}\n            </div>\n            <div class=\"param-type\">${paramSchema.type}</div>\n          </td>  \n          <td \n            style=\"${fieldType === 'object' ? 'width:100%; padding:0;' : this.allowTry === 'true' ? '' : 'display:none;'} min-width:100px;\" \n            colspan=\"${fieldType === 'object' ? 2 : 1}\">\n            ${fieldType === 'array'\n              ? (fieldSchema.items && fieldSchema.items.format === 'binary')\n                ? html`\n                <div class=\"file-input-container col\" style='align-items:flex-end;' @click=\"${(e) => this.onAddRemoveFileInput(e, fieldName, mimeType)}\">\n                  <div class='input-set row'>\n                    <input \n                      type = \"file\"\n                      part = \"file-input\"\n                      style = \"width:100%\" \n                      data-pname = \"${fieldName}\" \n                      data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                      data-array = \"false\" \n                      data-file-array = \"true\" \n                    />\n                    <button class=\"file-input-remove-btn\"> &#x2715; </button>\n                  </div>  \n                  <button class=\"m-btn primary file-input-add-btn\" part=\"btn btn-fill\" style=\"margin:2px 25px 0 0; padding:2px 6px;\">ADD</button>\n                </div>  \n                `\n                : html`\n                  <tag-input\n                    style = \"width:100%;\" \n                    data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                    data-pname = \"${fieldName}\"\n                    data-default = \"${paramSchema.default || ''}\"\n                    data-array = \"true\"\n                    placeholder=\"${(Array.isArray(paramSchema.example) ? paramSchema.example[0] : paramSchema.example) || 'add-multiple &#x21a9;'}\"\n                    .value = \"${paramSchema.default || ''}\"\n                  >\n                  </tag-input>\n                `\n              : html`\n                ${fieldType === 'object'\n                  ? html`\n                  <div class=\"tab-panel row\" style=\"min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;\">\n                    <div style=\"width:24px; background-color:var(--light-border-color)\">\n                      <div class=\"row\" style=\"flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;\" @click=\"${(e) => {\n                        if (e.target.classList.contains('v-tab-btn')) {\n                          const tab = e.target.dataset.tab;\n                          if (tab) {\n                            const tabPanelEl = e.target.closest('.tab-panel');\n                            const selectedTabBtnEl = tabPanelEl.querySelector(`.v-tab-btn[data-tab=\"${tab}\"]`);\n                            const otherTabBtnEl = [...tabPanelEl.querySelectorAll(`.v-tab-btn:not([data-tab=\"${tab}\"])`)];\n                            const selectedTabContentEl = tabPanelEl.querySelector(`.tab-content[data-tab=\"${tab}\"]`);\n                            const otherTabContentEl = [...tabPanelEl.querySelectorAll(`.tab-content:not([data-tab=\"${tab}\"])`)];\n                            selectedTabBtnEl.classList.add('active');\n                            selectedTabContentEl.style.display = 'block';\n                            otherTabBtnEl.forEach((el) => { el.classList.remove('active'); });\n                            otherTabContentEl.forEach((el) => { el.style.display = 'none'; });\n                          }\n                        }\n                        if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; }\n                      }}\">\n                        <button class=\"v-tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab = 'model'>MODEL</button>\n                        <button class=\"v-tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}\" data-tab = 'body'>REQUEST BODY</button>\n                      </div>\n                    </div>  \n                    ${html`\n                      <div class=\"tab-content col\" data-tab = 'model' style=\"display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}; padding-left:5px; width:100%;\"> \n                        <schema-tree\n                          .data = '${formdataPartSchema}'\n                          schema-expand-level = \"${this.schemaExpandLevel}\"\n                          schema-description-expanded = \"${this.schemaDescriptionExpanded}\"> </schema-tree>\n                      </div>`\n                    }\n                    ${html`\n                      <div class=\"tab-content col\" data-tab = 'example' style=\"display:${this.activeSchemaTab === 'body' ? 'block' : 'none'}; padding-left:5px; width:100%\"> \n                        <textarea \n                          class = \"textarea\" placeholder=\"${formdataPartExample[0] && formdataPartExample[0].exampleValue || paramSchema.default || ''}\"\n                          part = \"textarea textarea-param\"\n                          style = \"width:100%; border:none; resize:vertical;\" \n                          data-array = \"false\" \n                          data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                          data-pname = \"${fieldName}\"\n                          data-default = \"${paramSchema.default || ''}\"\n                          spellcheck = \"false\"\n                        >${this.fillRequestWithDefault === 'true' ? paramSchema.default : ''}</textarea>\n                        <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->\n                        <textarea data-pname = \"hidden-${fieldName}\" data-ptype = \"${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}\" class=\"is-hidden\" style=\"display:none\">${paramSchema.default}</textarea>\n                      </div>`\n                    }\n                  </div>`\n                  : html`\n                    ${this.allowTry === 'true'\n                      ? html`<input placeholder=\"${paramSchema.example || paramSchema.default || ''}\"\n                          .value = \"${this.fillRequestWithDefault === 'true' ? (paramSchema.default || '') : ''}\"\n                          spellcheck = \"false\"\n                          type = \"${fieldSchema.format === 'binary' ? 'file' : fieldSchema.format === 'password' ? 'password' : 'text'}\"\n                          part = \"textbox textbox-param\"\n                          style = \"width:100%\"\n                          data-ptype = \"${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}\"\n                          data-pname = \"${fieldName}\"\n                          data-default = \"${paramSchema.default || ''}\"\n                          data-array = \"false\"\n                        />`\n                      : ''\n                    }\n                    `\n                  }`\n              }\n          </td>\n          ${fieldType === 'object'\n            ? ''\n            : html`\n              <td>\n                ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern\n                  ? html`\n                    <div class=\"param-constraint\">\n                      ${paramSchema.pattern ? html`<span style=\"font-weight:bold\">Pattern: </span>${paramSchema.pattern}<br/>` : ''}\n                      ${paramSchema.constraint ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraint}<br/>` : ''}\n                      ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n                        ${i > 0 ? '|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n                        ${html`\n                          <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                            data-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                            data-enum=\"${v.trim()}\"\n                            @click=\"${(e) => {\n                              const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${fieldName}\"]`);\n                              if (inputEl) {\n                                if (e.target.dataset.type === 'array') {\n                                  inputEl.value = [e.target.dataset.enum];\n                                } else {\n                                  inputEl.value = e.target.dataset.enum;\n                                }\n                              }\n                            }}\"\n                          > \n                            ${v} \n                          </a>`\n                        }`)\n                      }\n                    </div>`\n                  : ''\n                }\n              </td>`\n          }\n        </tr>\n        ${fieldType === 'object'\n          ? ''\n          : html`\n            <tr>\n              <td style=\"border:none\"> </td>\n              <td colspan=\"2\" style=\"border:none; margin-top:0; padding:0 5px 8px 5px;\"> \n                <span class=\"m-markdown-small\">${unsafeHTML(marked(fieldSchema.description || ''))}</span>\n                ${paramSchema.example\n                  ? html`\n                    <span>\n                      <span style=\"font-weight:bold\"> Example: </span>\n                      ${paramSchema.type === 'array' ? '[ ' : ''}\n                      <a part=\"anchor anchor-param-example\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n                        data-default-type=\"${paramSchema.type === 'array' ? paramSchema.type : 'string'}\"\n                        data-default = \"${Array.isArray(paramSchema.example) && paramSchema.example.join('~|~') || paramSchema.example || ''}\"\n                        @click=\"${(e) => {\n                          const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${fieldName}\"]`);\n                          if (inputEl) {\n                            if (e.target.dataset.exampleType === 'array') {\n                              inputEl.value = e.target.dataset.example.split('~|~');\n                            } else {\n                              inputEl.value = e.target.dataset.example;\n                            }\n                          }\n                        }}\"\n                      >\n                        ${paramSchema.type === 'array' ? paramSchema.example.join(', ') : paramSchema.example}\n                      </a>\n                      ${paramSchema.type === 'array' ? '] ' : ''}\n                    </span>`\n                  : ''\n                }\n              </td>\n            </tr>\n          `\n        }`);\n      }\n      return html`\n        <table role=\"presentation\" style=\"width:100%;\" class=\"m-table\">\n          ${formDataTableRows}\n        </table>\n      `;\n    }\n\n    return html`\n      <textarea\n        class = \"textarea dynamic-form-param ${mimeType}\"\n        part = \"textarea textarea-param\"\n        spellcheck = \"false\"\n        data-pname=\"dynamic-form\" \n        data-ptype=\"${mimeType}\"  \n        style=\"width:100%\"\n      >${exampleValue}</textarea>\n      ${schema.description ? html`<span class=\"m-markdown-small\">${unsafeHTML(marked(schema.description))}</span>` : ''}\n    `;\n  }\n\n  apiResponseTabTemplate() {\n    const responseFormat = this.responseHeaders.includes('json') ? 'json' : (this.responseHeaders.includes('html') || this.responseHeaders.includes('xml')) ? 'html' : '';\n    return html`\n      <div class=\"row\" style=\"font-size:var(--font-size-small); margin:5px 0\">\n      ${this.responseMessage\n        ? html`<div class=\"response-message ${this.responseStatus}\">Response Status: ${this.responseMessage}\n          ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''}\n        </div>` : ''\n      }\n      <div style=\"flex:1\"></div>\n        <button class=\"m-btn\" part=\"btn btn-outline\" @click=\"${this.clearResponseData}\">CLEAR RESPONSE</button>\n      </div>\n      <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n        <div id=\"tab_buttons\" class=\"tab-buttons row\" @click=\"${(e) => {\n            if (e.target.classList.contains('tab-btn') === false) { return; }\n            this.activeResponseTab = e.target.dataset.tab;\n        }}\">\n          <button class=\"tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}\" data-tab = 'response'>RESPONSE</button>\n          <button class=\"tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}\"  data-tab = 'headers'>RESPONSE HEADERS</button>\n          <button class=\"tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}\" data-tab = 'curl'>CURL</button>\n        </div>\n        ${this.responseIsBlob\n          ? html`\n            <div class=\"tab-content col\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\">\n              <button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.downloadResponseBlob}\" part=\"btn btn-outline\">DOWNLOAD</button>\n              ${this.responseBlobType === 'view'\n                ? html`<button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.viewResponseBlob}\" part=\"btn btn-outline\">VIEW (NEW TAB)</button>`\n                : ''\n              }\n            </div>`\n          : html`\n            <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\" >\n              <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part=\"btn btn-fill\">Copy</button>\n              <pre>${responseFormat\n                ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`\n                : `${this.responseText}`\n              }\n              </pre>\n            </div>`\n        }\n        <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};\" >\n          <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part=\"btn btn-fill\">Copy</button>\n          <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>\n        </div>\n        <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};\">\n          <button class=\"toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\\\$/, ''), e); }}' part=\"btn btn-fill\">Copy</button>\n          <pre><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>\n        </div>\n      </div>`;\n  }\n\n  apiCallTemplate() {\n    return html`\n    <div style=\"display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);\">\n      ${\n        this.parameters.length > 0 || this.request_body\n          ? html`\n            <button class=\"m-btn thin-border\" part=\"btn btn-outline\" style=\"margin-right:5px;\" @click=\"${this.onClearRequestData}\">\n              CLEAR\n            </button>`\n          : ''\n      }\n      <button class=\"m-btn primary btn-execute thin-border\" part=\"btn btn-fill btn-try\" @click=\"${this.onTryClick}\">EXECUTE</button>\n    </div>\n    ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}\n    `;\n  }\n  /* eslint-enable indent */\n\n  onClearRequestData(e) {\n    const requestPanelEl = e.target.closest('.request-panel');\n    const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];\n    requestPanelInputEls.forEach((el) => { el.value = ''; });\n  }\n\n  async onTryClick() {\n    const tryBtnEl = this.querySelectorAll('.btn-execute')[0];\n    let fetchUrl;\n    let curlUrl;\n    let curl = '';\n    let curlHeaders = '';\n    let curlData = '';\n    let curlForm = '';\n    const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');\n    const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];\n    const acceptHeader = respEl && respEl.selectedMimeType;\n    const requestPanelEl = this.closest('.request-panel');\n    const pathParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='path']\")];\n    const queryParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query']\")];\n    const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query-object']\")];\n    const headerParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='header']\")];\n    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');\n\n    fetchUrl = this.path;\n    const fetchOptions = {\n      method: this.method.toUpperCase(),\n      headers: new Headers()\n    };\n    // Generate URL using Path Params\n    pathParamEls.map((el) => {\n      fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value));\n    });\n\n    // Query Params\n    const urlQueryParam = new URLSearchParams();\n    if (queryParamEls.length > 0) {\n      queryParamEls.forEach((el) => {\n        if (el.dataset.array === 'false') {\n          if (el.value !== '') {\n            urlQueryParam.append(el.dataset.pname, el.value);\n          }\n        } else {\n          const paramSerializeStyle = el.dataset.paramSerializeStyle;\n          const paramSerializeExplode = el.dataset.paramSerializeExplode;\n          let vals = ((el.value && Array.isArray(el.value)) ? el.value : []);\n          vals = Array.isArray(vals) ? vals.filter((v) => v !== '') : [];\n          if (vals.length > 0) {\n            if (paramSerializeStyle === 'spaceDelimited') {\n              urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\\s|\\s$/g, ''));\n            } else if (paramSerializeStyle === 'pipeDelimited') {\n              urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\\||\\|$/g, ''));\n            } else {\n              if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n                vals.forEach((v) => { urlQueryParam.append(el.dataset.pname, v); });\n              } else {\n                urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));\n              }\n            }\n          }\n        }\n      });\n    }\n\n    // Query Params (Dynamic - create from JSON)\n    if (queryParamObjTypeEls.length > 0) {\n      queryParamObjTypeEls.map((el) => {\n        try {\n          let queryParamObj = {};\n          const paramSerializeStyle = el.dataset.paramSerializeStyle;\n          const paramSerializeExplode = el.dataset.paramSerializeExplode;\n          queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\\s+/g, ' ')));\n          for (const key in queryParamObj) {\n            if (typeof queryParamObj[key] === 'object') {\n              if (Array.isArray(queryParamObj[key])) {\n                if (paramSerializeStyle === 'spaceDelimited') {\n                  urlQueryParam.append(key, queryParamObj[key].join(' '));\n                } else if (paramSerializeStyle === 'pipeDelimited') {\n                  urlQueryParam.append(key, queryParamObj[key].join('|'));\n                } else {\n                  if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n                    queryParamObj[key].forEach((v) => {\n                      urlQueryParam.append(key, v);\n                    });\n                  } else {\n                    urlQueryParam.append(key, queryParamObj[key]);\n                  }\n                }\n              }\n            } else {\n              urlQueryParam.append(key, queryParamObj[key]);\n            }\n          }\n        } catch (err) {\n          console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console\n        }\n      });\n    }\n\n    // Add Authentication api keys if provided\n    this.api_keys.filter((v) => v.finalKeyValue).forEach((v) => {\n      if (v.in === 'query') {\n        urlQueryParam.append(v.name, v.finalKeyValue);\n        return;\n      }\n\n      // Otherwise put it in the header\n      fetchOptions.headers.append(v.name, v.finalKeyValue);\n      curlHeaders += ` -H \"${v.name}: ${v.finalKeyValue}\" \\\\\\n`;\n    });\n\n    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;\n\n    // Final URL for API call\n    fetchUrl = `${this.serverUrl.replace(/\\/$/, '')}${fetchUrl}`;\n    if (fetchUrl.startsWith('http') === false) {\n      const url = new URL(fetchUrl, window.location.href);\n      curlUrl = url.href;\n    } else {\n      curlUrl = fetchUrl;\n    }\n    curl = `curl -X ${this.method.toUpperCase()} \"${curlUrl}\" \\\\\\n`;\n\n    if (acceptHeader) {\n      // Uses the acceptHeader from Response panel\n      fetchOptions.headers.append('Accept', acceptHeader);\n      curlHeaders += ` -H \"Accept: ${acceptHeader}\" \\\\\\n`;\n    } else if (this.accept) {\n      fetchOptions.headers.append('Accept', this.accept);\n      curlHeaders += ` -H \"Accept: ${this.accept}\" \\\\\\n`;\n    }\n\n    // Add Header Params\n    headerParamEls.map((el) => {\n      if (el.value) {\n        fetchOptions.headers.append(el.dataset.pname, el.value);\n        curlHeaders += ` -H \"${el.dataset.pname}: ${el.value}\" \\\\\\n`;\n      }\n    });\n\n    // Request Body Params\n    if (requestBodyContainerEl) {\n      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;\n      if (requestBodyType.includes('form-urlencoded')) {\n        // url-encoded Form Params (dynamic) - Parse JSON and generate Params\n        const formUrlDynamicTextAreaEl = requestPanelEl.querySelector(\"[data-ptype='dynamic-form']\");\n        if (formUrlDynamicTextAreaEl) {\n          const val = formUrlDynamicTextAreaEl.value;\n          const formUrlDynParams = new URLSearchParams();\n          let proceed = true;\n          let tmpObj;\n          if (val) {\n            try {\n              tmpObj = JSON.parse(val);\n            } catch (err) {\n              proceed = false;\n              console.warn('OpenAPI Explorer: Invalid JSON provided', err); // eslint-disable-line no-console\n            }\n          } else {\n            proceed = false;\n          }\n          if (proceed) {\n            for (const prop in tmpObj) {\n              formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));\n            }\n            fetchOptions.body = formUrlDynParams;\n            curlData = ` -d ${formUrlDynParams.toString()} \\\\\\n`;\n          }\n        } else {\n          // url-encoded Form Params (regular)\n          const formUrlEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-urlencode']\")];\n          const formUrlParams = new URLSearchParams();\n          formUrlEls\n            .filter((v) => (v.type !== 'file'))\n            .forEach((el) => {\n              if (el.dataset.array === 'false') {\n                if (el.value) {\n                  formUrlParams.append(el.dataset.pname, el.value);\n                }\n              } else {\n                const vals = (el.value && Array.isArray(el.value)) ? el.value.join(',') : '';\n                formUrlParams.append(el.dataset.pname, vals);\n              }\n            });\n          fetchOptions.body = formUrlParams;\n          curlData = ` -d ${formUrlParams.toString()} \\\\\\n`;\n        }\n      } else if (requestBodyType.includes('form-data')) {\n        const formDataParams = new FormData();\n        const formDataEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-data']\")];\n        formDataEls.forEach((el) => {\n          if (el.dataset.array === 'false') {\n            if (el.type === 'file' && el.files[0]) {\n              formDataParams.append(el.dataset.pname, el.files[0], el.files[0].name);\n              curlForm += ` -F \"${el.dataset.pname}=@${el.files[0].name}\" \\\\\\n`;\n            } else if (el.value) {\n              formDataParams.append(el.dataset.pname, el.value);\n              curlForm += ` -F \"${el.dataset.pname}=${el.value}\" \\\\\\n`;\n            }\n          } else if (el.value && Array.isArray(el.value)) {\n            el.value.forEach((v) => {\n              curlForm = `${curlForm} -F \"${el.dataset.pname}[]=${v}\" \\\\\\n`;\n            });\n            formDataParams.append(el.dataset.pname, el.value.join(','));\n          }\n        });\n        fetchOptions.body = formDataParams;\n      } else if (mediaFileRegex.test(requestBodyType) || textFileRegex.test(requestBodyType)) {\n        const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');\n        if (bodyParamFileEl && bodyParamFileEl.files[0]) {\n          fetchOptions.body = bodyParamFileEl.files[0];\n          curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\\\\n`;\n        }\n      } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {\n        const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');\n        if (exampleTextAreaEl && exampleTextAreaEl.value) {\n          fetchOptions.body = exampleTextAreaEl.value;\n          if (requestBodyType.includes('json')) {\n            try {\n              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\\\\n`;\n            } catch (err) { /* Ignore unparseable JSON */ }\n          }\n\n          if (!curlData) {\n            // Save single quotes wrapped => 'text' => `\"'\"text\"'\"`\n            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\\'\"\\'\"\\'')}' \\\\\\n`;\n          }\n        }\n      }\n      // Common for all request-body\n      if (!requestBodyType.includes('form-data')) {\n        // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries\n        fetchOptions.headers.append('Content-Type', requestBodyType);\n      }\n      curlHeaders += ` -H \"Content-Type: ${requestBodyType}\" \\\\\\n`;\n    }\n    this.curlSyntax = '';\n    this.responseIsBlob = false;\n\n    this.respContentDisposition = '';\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;\n    if (this.fetchCredentials) {\n      fetchOptions.credentials = this.fetchCredentials;\n    }\n\n    const fetchRequest = { url: fetchUrl, options: fetchOptions };\n    const event = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        request: fetchRequest,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('before-try', event));\n    this.dispatchEvent(new CustomEvent('request', event));\n    const fetchRequestObject = new Request(fetchUrl, fetchOptions);\n\n    let fetchResponse;\n    try {\n      let respBlob;\n      let respJson;\n      let respText;\n      tryBtnEl.disabled = true;\n      const fetchStart = new Date();\n\n      this.responseStatus = '';\n      this.responseMessage = '';\n      this.responseUrl = '';\n      this.responseHeaders = '';\n      this.responseText = '⌛';\n\n      this.requestUpdate();\n      const awaiter = new Promise(resolve => setTimeout(resolve, 200));\n      fetchResponse = await fetch(fetchRequestObject);\n      this.responseElapsedMs = new Date() - fetchStart;\n      await awaiter;\n\n      tryBtnEl.disabled = false;\n      this.responseStatus = fetchResponse.ok ? 'success' : 'error';\n      this.responseMessage = fetchResponse.statusText ? `${fetchResponse.statusText} (${fetchResponse.status})` : fetchResponse.status;\n      this.responseUrl = fetchResponse.url;\n      this.responseHeaders = '';\n      const headers = {};\n      fetchResponse.headers.forEach((hdrVal, hdr) => {\n        this.responseHeaders = `${this.responseHeaders}${hdr.trim()}: ${hdrVal}\\n`;\n        headers[hdr.trim()] = hdrVal && hdrVal.trim();\n      });\n      const contentType = fetchResponse.headers.get('content-type');\n      const respEmpty = (await fetchResponse.clone().text()).length === 0;\n      if (respEmpty) {\n        this.responseText = '';\n      } else if (contentType) {\n        if (contentType.includes('json')) {\n          if ((/charset=[^\"']+/).test(contentType)) {\n            const encoding = contentType.split('charset=')[1];\n            const buffer = await fetchResponse.arrayBuffer();\n            try {\n              respText = new TextDecoder(encoding).decode(buffer);\n            } catch {\n              respText = new TextDecoder('utf-8').decode(buffer);\n            }\n            try {\n              this.responseText = JSON.stringify(JSON.parse(respText), null, 8);\n            } catch {\n              this.responseText = respText;\n            }\n          } else {\n            respJson = await fetchResponse.json();\n            this.responseText = JSON.stringify(respJson, null, 8);\n          }\n        } else if (textFileRegex.test(contentType)) {\n          this.responseIsBlob = true;\n          this.responseBlobType = 'download';\n        } else if (mediaFileRegex.test(contentType)) {\n          this.responseIsBlob = true;\n          this.responseBlobType = 'view';\n        } else {\n          respText = await fetchResponse.text();\n          if (contentType.includes('xml')) {\n            this.responseText = formatXml(respText, { textNodesOnSameLine: true, indentor: ' ' });\n          } else {\n            this.responseText = respText;\n          }\n        }\n        if (this.responseIsBlob) {\n          const contentDisposition = fetchResponse.headers.get('content-disposition');\n          const filenameRegex = /filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/;\n          const filename = filenameRegex.exec(contentDisposition);\n          this.respContentDisposition = filename && filename[1] && filename[1].replace(/['\"]/g, '') || `download.${mimeTypeResolver.extension(contentType) || 'file'}`;\n          respBlob = await fetchResponse.blob();\n          this.responseBlobUrl = URL.createObjectURL(respBlob);\n        }\n      } else {\n        respText = await fetchResponse.text();\n        this.responseText = respText;\n      }\n      const responseEvent = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          request: fetchRequest,\n          response: {\n            headers,\n            body: respJson || respText || respBlob || fetchResponse.body,\n            status: fetchResponse.status,\n          },\n        },\n      };\n      this.dispatchEvent(new CustomEvent('after-try', responseEvent));\n      this.dispatchEvent(new CustomEvent('response', responseEvent));\n    } catch (error) {\n      tryBtnEl.disabled = false;\n      this.responseMessage = `${error.message} (Check the browser network tab for more information.)`;\n      this.responseStatus = 'error';\n      const responseEvent = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          error,\n          request: fetchRequest,\n        },\n      };\n      document.dispatchEvent(new CustomEvent('after-try', responseEvent));\n      document.dispatchEvent(new CustomEvent('response', responseEvent));\n    }\n  }\n\n  onAddRemoveFileInput(e, pname, ptype) {\n    if (e.target.tagName.toLowerCase() !== 'button') {\n      return;\n    }\n\n    if (e.target.classList.contains('file-input-remove-btn')) {\n      // Remove File Input Set\n      const el = e.target.closest('.input-set');\n      el.remove();\n      return;\n    }\n    const el = e.target.closest('.file-input-container');\n\n    // Add File Input Set\n\n    // Container\n    const newInputContainerEl = document.createElement('div');\n    newInputContainerEl.setAttribute('class', 'input-set row');\n\n    // File Input\n    const newInputEl = document.createElement('input');\n    newInputEl.type = 'file';\n    newInputEl.style = 'width:200px; margin-top:2px;';\n    newInputEl.setAttribute('data-pname', pname);\n    newInputEl.setAttribute('data-ptype', ptype.includes('form-urlencode') ? 'form-urlencode' : 'form-data');\n    newInputEl.setAttribute('data-array', 'false');\n    newInputEl.setAttribute('data-file-array', 'true');\n\n    // Remover Button\n    const newRemoveBtnEl = document.createElement('button');\n    newRemoveBtnEl.setAttribute('class', 'file-input-remove-btn');\n    newRemoveBtnEl.innerHTML = '&#x2715;';\n\n    newInputContainerEl.appendChild(newInputEl);\n    newInputContainerEl.appendChild(newRemoveBtnEl);\n    el.insertBefore(newInputContainerEl, e.target);\n    // el.appendChild(newInputContainerEl);\n  }\n\n  downloadResponseBlob() {\n    if (this.responseBlobUrl) {\n      const a = document.createElement('a');\n      document.body.appendChild(a);\n      a.style = 'display: none';\n      a.href = this.responseBlobUrl;\n      a.download = this.respContentDisposition;\n      a.click();\n      a.remove();\n    }\n  }\n\n  viewResponseBlob() {\n    if (this.responseBlobUrl) {\n      const a = document.createElement('a');\n      document.body.appendChild(a);\n      a.style = 'display: none';\n      a.href = this.responseBlobUrl;\n      a.target = '_blank';\n      a.click();\n      a.remove();\n    }\n  }\n\n  clearResponseData() {\n    this.responseUrl = '';\n    this.responseHeaders = '';\n    this.responseText = '';\n    this.responseStatus = '';\n    this.responseMessage = '';\n    this.responseElapsedMs = 0;\n    this.responseIsBlob = false;\n    this.responseBlobType = '';\n    this.respContentDisposition = '';\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n  }\n\n  requestParamFunction(event) {\n    if (event.key === 'Enter') {\n      this.onTryClick();\n      event.preventDefault();\n    }\n  }\n\n  disconnectedCallback() {\n    // Cleanup ObjectURL forthe blob data if this component created one\n    if (this.responseBlobUrl) {\n      URL.revokeObjectURL(this.responseBlobUrl);\n      this.responseBlobUrl = '';\n    }\n    super.disconnectedCallback();\n  }\n}\n\n// Register the element with the browser\nif (!customElements.get('openapi-explorer')) {\n  customElements.define('api-request', ApiRequest);\n}\n"],"names":[],"sourceRoot":""}

package/dist/es/components/api-request.js

@@ -334,7 +334,7 @@ export default class ApiRequest extends LitElement {
 
         if (this.schemaStyle === 'table') {
           reqBodySchemaHtml = html` ${reqBodySchemaHtml} <schema-table class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
-        } else if (this.schemaStyle === 'tree') {
+        } else {
           reqBodySchemaHtml = html` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-tree> `;
         }
       }

package/dist/es/components/api-response.js

@@ -172,7 +172,7 @@ export default class ApiResponse extends LitElement {
       return html` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
     }
 
-    return html` ${this.schemaStyle === 'table' ? html` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}">  </schema-table>` : html` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
+    return html` ${this.schemaStyle === 'table' ? html` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : html` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
   }
   /* eslint-enable indent */
 

package/dist/es/components/json-tree.js

@@ -17,15 +17,15 @@ export default class JsonTree extends LitElement {
   }
 
   static get styles() {
-    return [FontStyles, BorderStyles, InputStyles, css`:host{display:flex}.json-tree{background:#333;color:#fff;padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.open-bracket.collapsed+.inside-bracket,.open-bracket.collapsed+.inside-bracket+.close-bracket{display:none}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{position:absolute;right:6px;display:flex;align-items:center}`];
+    return [FontStyles, BorderStyles, InputStyles, css`:host{display:flex}.json-tree{background:#333;color:#fff;padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.open-bracket.collapsed+.inside-bracket,.open-bracket.collapsed+.inside-bracket+.close-bracket{display:none}.close-bracket{margin-left:-2px}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return html` <div class="json-tree"> <div class="toolbar"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
+    return html` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
       copyToClipboard(JSON.stringify(this.data, null, 2), e);
-    }}">Copy</button> </div> ${this.generateTree(this.data, true)} </div> `;
+    }}">Copy</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {

package/dist/es/components/schema-table.js

@@ -49,15 +49,13 @@ export default class SchemaTable extends LitElement {
   }
 
   static get styles() {
-    return [FontStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + var(--font-size-small) + 4px)}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
+    return [FontStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return html` <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> <div style="flex:1"></div> <div class="toolbar-item" @click="${() => {
-      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
-    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data && this.data['::description'] ? html`<span class="m-markdown"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : ''} <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    return html` <div class="table"> ${this.data && this.data['::description'] ? html`<span class="m-markdown"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : ''} <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
   }
 
   generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
@@ -105,7 +103,7 @@ export default class SchemaTable extends LitElement {
     }
 
     if (typeof data === 'object') {
-      return html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? html` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${unsafeHTML(marked(description || ''))}</div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : html`${Object.keys(data).map(dataKey => ['::title', '::description', '::type', '::props', '::deprecated'].includes(dataKey) && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} <div> </div></div>`;
+      return html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? html` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${unsafeHTML(marked(description || ''))}</div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => dataKey.startsWith('::') && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} <div> </div></div>`;
     } // For Primitive Data types
 
 
@@ -114,6 +112,7 @@ export default class SchemaTable extends LitElement {
       readOrWriteOnly,
       constraint,
       defaultValue,
+      example,
       allowedValues,
       pattern,
       schemaDescription,
@@ -130,7 +129,7 @@ export default class SchemaTable extends LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type ${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : type} <span style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''} ${schemaTitle || schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:** ` : ''}${schemaDescription || ''}`))}</span>` : ''} ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Constraints: </span> ${constraint}</div>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type ${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : type} <span style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''} <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/es/components/schema-tree.js

@@ -50,15 +50,18 @@ export default class SchemaTree extends LitElement {
   }
 
   static get styles() {
-    return [FontStyles, SchemaStyles, BorderStyles, css`.tree{min-height:30px;background:#333;padding:10px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + 8px)}.collapsed-descr .m-markdown-small p{line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.tr.collapsed+.inside-bracket,.tr.collapsed+.inside-bracket+.close-bracket{display:none}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}`];
+    return [FontStyles, SchemaStyles, BorderStyles, css`.tree{min-height:30px;background:#333;padding:12px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono);margin-left:-2px}.tr.collapsed .close-bracket{margin-left:0}.tr.collapsed+.inside-bracket,.tr.collapsed+.inside-bracket+.close-bracket{display:none}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return html` <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => {
-      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
-    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : html`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+    return html` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : html`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+  }
+
+  toggleSchemaDescription() {
+    this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
+    this.requestUpdate();
   }
 
   generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
@@ -151,6 +154,7 @@ export default class SchemaTree extends LitElement {
       readOrWriteOnly,
       constraint,
       defaultValue,
+      example,
       allowedValues,
       pattern,
       schemaDescription,
@@ -167,7 +171,7 @@ export default class SchemaTree extends LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span class="${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : `${type}`} </span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span class="${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : `${type}`} </span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/es/openapi-explorer.js

@@ -91,17 +91,16 @@ export default class OpenApiExplorer extends LitElement {
         attribute: 'fill-defaults'
       },
       // Schema Styles
-      schemaStyle: {
-        type: String,
-        attribute: 'schema-style'
+      displaySchemaAsTable: {
+        type: Boolean,
+        attribute: 'table'
       },
       schemaExpandLevel: {
         type: Number,
         attribute: 'schema-expand-level'
       },
       schemaDescriptionExpanded: {
-        type: String,
-        attribute: 'schema-description-expanded'
+        type: String
       },
       // API Server
       serverUrl: {
@@ -133,9 +132,9 @@ export default class OpenApiExplorer extends LitElement {
         type: String,
         attribute: 'show-server-selection'
       },
-      showComponents: {
-        type: String,
-        attribute: 'show-components'
+      hideComponents: {
+        type: Boolean,
+        attribute: 'hide-components'
       },
       // Main Colors and Font
       primaryColor: {
@@ -254,10 +253,6 @@ export default class OpenApiExplorer extends LitElement {
     this.renderStyle = 'focused';
     this.explorerLocation = this.explorerLocation || getCurrentElement();
 
-    if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) {
-      this.schemaStyle = 'tree';
-    }
-
     if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) {
       this.defaultSchemaTab = 'model';
     }
@@ -317,10 +312,6 @@ export default class OpenApiExplorer extends LitElement {
       this.allowAuthentication = 'true';
     }
 
-    if (!this.showComponents || !'true false'.includes(this.showComponents)) {
-      this.showComponents = 'true';
-    }
-
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) {
       this.fetchCredentials = '';
     }